Javascript JQuery访问<；中的上一个标记文本；td>；

我有一个id为xxxx的复选框，我正试图从该复选框访问

中的

WaLia

文本，以便我可以使用该文本发出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>

01
瓦利亚
Walia@gmail.com
+1 222 555 6666
加拿大安大略省

---

到目前为止，我们设法做到：

<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>

$（“#xxxx”）。单击（函数（e）{
如果（例如，选中目标）{
var msg=$（this.prev（）.text（）；//此处需要“WaLia”
控制台日志（msg）；
//警报（1）；
}否则{
console.log（'lol'）；
//警报（2）；
}
});

---

请注意，

中有更多的

对象，每个对象都有唯一的

复选框id。
您应该选择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

希望对你有帮助

Upd.：
如果“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>

您应该选择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

希望对你有帮助

Upd.：
如果“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>

听起来你想使用css选择器来访问你的元素。假设您想要的值总是在第二个
td
中，这应该是可行的

$(this).parent().parent('td:nth-child(2)');

当然，如果您可以在包含文本的元素上放置一个ID，并使用
getElementById
，那么您的代码就不会过于脆弱，即使HTML结构发生了细微的变化，也不容易被破坏

更好的是，如果您正在生成这个HTML，您可以将复选框的值分配给用户，使其与可见值相同，然后您可以使用
e.target.value

<input type="checkbox" value="WaLia" id="xxxx" />

$("#xxxx").click(function(e){
    if (e.target.checked){
      var msg = e.target.value
      console.log(msg);
    } else {
      console.log('lol');
    }
});


$（“#xxxx”）。单击（函数（e）{
如果（例如，选中目标）{
var msg=e.target.value
控制台日志（msg）；
}否则{
console.log（'lol'）；
}
});
听起来您想使用css选择器访问您的元素。假设您想要的值总是在第二个
td
中，这应该是可行的

$(this).parent().parent('td:nth-child(2)');

当然，如果您可以在包含文本的元素上放置一个ID，并使用
getElementById
，那么您的代码就不会过于脆弱，即使HTML结构发生了细微的变化，也不容易被破坏

更好的是，如果您正在生成这个HTML，您可以将复选框的值分配给用户，使其与可见值相同，然后您可以使用
e.target.value

<input type="checkbox" value="WaLia" id="xxxx" />

$("#xxxx").click(function(e){
    if (e.target.checked){
      var msg = e.target.value
      console.log(msg);
    } else {
      console.log('lol');
    }
});


$（“#xxxx”）。单击（函数（e）{
如果（例如，选中目标）{
var msg=e.target.value
控制台日志（msg）；
}否则{
console.log（'lol'）；
}
});
您可以使用
$（this）.slestest（'tr'）.find（'td:nth（1）'）.text（）
获取最近的
tr
，然后在
tr
中查找
nth
元素，然后访问其文本

注意不要使用
$（“#xxxx”）。单击
，因为它只会将单击事件分配给id为
xxxx
的第一个元素。这就是
id选择器（#）
的工作原理。您可以使用
$（“[id='xxxx'）。请单击
，而不要使用该选项


$（“[id='xxxx'）。单击（函数（e））{
如果（例如，选中目标）{
var msg=$（this）.closest（'tr'）.find（'td:nth（1）'）.text（）；//此处需要“WaLia”
控制台日志（msg）；
//警报（1）；
}否则{
console.log（'lol'）；
//警报（2）；
}
})；

01
瓦利亚
Walia@gmail.com
+1 222 555 6666
加拿大安大略省
01
瓦利亚123
Walia123@gmail.com
+1 222 555 1234
加拿大托里托
您可以使用
$（this）.slestest（'tr'）.find（'td:nth（1）'）.text（）
获取最近的
tr
，然后在
tr
中查找
nth
元素，然后访问其文本

注意不要使用
$（“#xxxx”）。单击
，因为它只会将单击事件分配给id为
xxxx
的第一个元素。这就是
id选择器（#）的工作方式。
可以使用
$（“[id='xxxx'）。单击
，而不是那样


$（“[id='xxxx'）。单击（函数（e））{
如果（例如，选中目标）{
var msg=$（this）.closest（'tr'）.find（'td:nth（1）'）.text（）；//此处需要“WaLia”
控制台日志（msg）；
//警报（1）；
}否则{
console.log（'lol'）；
//警报（2）；
}
})；

01
瓦利亚
Walia@gmail.com
+1 222 555 6666
加拿大安大略省
01
瓦利亚123
Walia123@gmail.com
+1 222 555 1234
加拿大托里托
Id最好不要在HTML中重复，你可以使用类选择器。Id最好不要在HTML中重复，你可以使用类选择器。感谢除了答案之外的解释。我认为Id对于每个输入都是唯一的。如果Id相同，这是不正确的方法。最好使用类而不是Id。@MargulanZharkenov我完全同意你的看法。这是正确的假设是唯一的。这就是为什么
id
selector
$（“#id”）
只返回一个元素。因此，正如您所说，建议使用
类而不是
id
。感谢您除了答案之外的解释。我认为id对于每个输入都是唯一的。如果id相同，这是不正确的方法。最好使用class而不是id。@MargulanZharkenov我完全同意您的观点。这是正确的希望是独一无二的