时间戳

首页 > 解决方案 > JQuery 访问之前的标签文本

javascript - JQuery 访问之前的标签文本

问题描述

我有一个带有 id 的复选框xxxx，我正在尝试从该复选框访问WaLia文本<td>，以便我可以使用该文本发出 ajax 请求。

<tbody style="border:1px solid transparent; background-color:#242424; color:#A1A6AB; text-align: left;">
  <tr>
    <td style="padding: 14px;">01</td>
    <td>WaLia</td>
    <td>Walia@gmail.com</td>
    <td>+1 222 555 6666</td>
    <td>Ontario, Canada</td>
    <td>
      <label class="switch">
      <input type="checkbox" id="xxxx">
      <span class="slider round"></span>
      </label>
    </td>
  </tr>
</tbody>

到目前为止，设法做到：

<script>
  $("#xxxx").click(function(e){
    if (e.target.checked){
      var msg = $(this).prev().text(); // need "WaLia" here
      console.log(msg);
      //alert(1);
    }else{
      console.log('lol');
      //alert(2);
    }

  });
</script>

请注意，其中存在更多<tr>对象，并且<tbody>每个对象都有唯一的checkboxID。

标签： javascriptjquery

解决方案

您应该选择 tr 元素，然后选择文本所在的第二个子元素。然后做你想做的。

var parent = $("#xxxx").parent(); // td element of your input
var grandParent = parent.parent(); // tr element
var element = grandParent.children().eq(2); // selecting the second child
console.log(element.text()); // your text

希望它会帮助你。

更新： 如果每个输入的“xxxx”都相同，请不要使用 id。使用类原因 id 用于重复元素的独特情况和类。

HTML

<tr>
  <td style="padding: 14px;">01</td>
  <td>WaLia123</td>
  <td>Walia123@gmail.com</td>
  <td>+1 222 555 1234</td>
  <td>Torrento, Canada</td>
  <td>
    <label class="switch">
      <input type="checkbox" class="xxxx"><!--use class, not id!-->
      <span class="slider round"></span>
    </label>
  </td>
</tr>

JS

$(".xxxx").click(function(e){
    if (e.target.checked){
      var parent= $(this).parent().parent(); // td element of your input
      var grandParent = parent.parent(); // tr element
      var element = grandParent.children().eq(2);
      console.log(element.text());
      //alert(1);
    }else{
      console.log('lol');
      //alert(2);
    }

  });

推荐阅读