时间戳

首页 > 解决方案 > 没有为“eq()”返回值？

jquery - 没有为“eq()”返回值？

问题描述

我正在为表格编写代码，其中每行有 2 个 TD。

我可以使用 eq() 返回具有类“nameText”的第一个 TD 值，但为什么没有返回具有类“codeText”的第二个 TD 值？

这是代码：

HTML：

<tbody id="expTableValues">
<tr class="no-border">
<td class="nameText"><input type="checkbox" class="checkBoxItem">Director</td>
<td class="text-center codeText">Balkar</td>
<td class="text-right"><a class="mouseOverTooltip rowIcon color-amber deleteCenter"><i class="fas fa-trash-alt" data-toggle="tooltip" data-original-title="Delete"></i></a><a href="#" class="rowIcon editCenter"><i class="fas fa-file-signature" data-toggle="tooltip" data-original-title="Edit"></i></a></td>
</tr>

查询：

var nameText = $(this).closest('td').eq(0).text();
var codeText = $(this).closest('td').eq(1).text();

alert(nameText);
alert(codeText);

标签： jqueryhtml

解决方案

.closest('tr')因为在向下遍历树之前，您必须指向最近的 commont 父级：

var codeText = $(this).closest('td').eq(1).text();


$(".checkBoxItem").on("change", function() {
  var $tr = $(this).closest('tr');
  var nameText = $tr.find('td').eq(0).text();
  var codeText = $tr.find('td').eq(1).text();
  console.log(nameText);
  console.log(codeText);
});
<table>
  <tbody id="expTableValues">
    <tr class="no-border">
      <td class="nameText"><label><input type="checkbox" class="checkBoxItem">Director</label></td>
      <td class="text-center codeText">Balkar</td>
      <td class="text-right"><a class="mouseOverTooltip rowIcon color-amber deleteCenter"><i class="fas fa-trash-alt" data-toggle="tooltip" data-original-title="Delete"></i></a><a href="#" class="rowIcon editCenter"><i class="fas fa-file-signature" data-toggle="tooltip" data-original-title="Edit"></i></a></td>
    </tr>
  </tbody>
</table>

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

此外，由于您已经使用了类 nameText，并且codeText更好的是，引用它们：

var codeText = $(this).closest('td').eq(1).text();


$(".checkBoxItem").on("change", function() {
  var $tr = $(this).closest('tr')
  var nameText = $tr.find('.nameText').text();
  var codeText = $tr.find('.codeText').text();
  console.log(nameText);
  console.log(codeText);
});
<table>
  <tbody id="expTableValues">
    <tr class="no-border">
      <td class="nameText"><label><input type="checkbox" class="checkBoxItem">Director</label></td>
      <td class="text-center codeText">Balkar</td>
      <td class="text-right"><a class="mouseOverTooltip rowIcon color-amber deleteCenter"><i class="fas fa-trash-alt" data-toggle="tooltip" data-original-title="Delete"></i></a><a href="#" class="rowIcon editCenter"><i class="fas fa-file-signature" data-toggle="tooltip" data-original-title="Edit"></i></a></td>
    </tr>
  </tbody>
</table>

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

推荐阅读