jQuery选择器无法找到可见的最后一个孩子 [英] jquery selector unable to find visible last-child

问题描述

这是我的HTML:

<table id="dataTable" class="xLookup">
   <thead id="PickerTHEAD">
      <tr>
         <th class="xSelBox">&nbsp;</th>
         <th style="display: none">Option ID</th>
         <th>My Description</th>
         <th>QTY</th>
         <th>Unit Price</th>
         <th style="display: none">nj1</th>
         <th style="display: none">nj2</th>
      </tr>
      <tr>
         ...
      </tr>
   </thead>
   <tbody>
      ...
   </tbody>
</table>

这是我的jquery选择器:

And here is my jquery selector:

$( "table#dataTable.xLookup thead#PickerTHEAD tr th:visible:last-child" )

我希望它在PickerTHEAD(可能为<th>Unit Price</th>)中找到最后一次显示的 th，但找不到任何内容.

I am expecting it to find the last visible th within PickerTHEAD (which would be <th>Unit Price</th>), but it finds nothing.

如果我这样改变选择器以删除:visible ...

If I change my selector to remove the :visible like so...

$( "table#dataTable.xLookup thead#PickerTHEAD tr th:last-child" )

...然后按预期找到<th style="display: none">nj2</th>.

...then it finds <th style="display: none">nj2</th> as expected.

我做错了什么?如何选择最后一个可见的th?

What am I doing wrong? How can I select the last visible th?

推荐答案

尝试使用 .last() 选择器:

Try using .last() selector:

将匹配的元素集减少到集合中的最后一个元素.

Reduce the set of matched elements to the final one in the set.

$( "table#dataTable.xLookup thead#PickerTHEAD tr th:visible" ).last()

因为您最后一个可见的孩子不是DOM节点中的不是最后一个孩子.

Because your last visible child is not last child in the DOM node.

var a = $( "table#dataTable.xLookup thead#PickerTHEAD tr th:visible" ).last();

console.log(a.html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="dataTable" class="xLookup">
   <thead id="PickerTHEAD">
      <tr>
         <th class="xSelBox">&nbsp;</th>
         <th style="display: none">Option ID</th>
         <th>My Description</th>
         <th>QTY</th>
         <th>Unit Price</th>
         <th style="display: none">nj1</th>
         <th style="display: none">nj2</th>
      </tr>
      <tr>
         ...
      </tr>
   </thead>
   <tbody>
      ...
   </tbody>
</table>

这篇关于jQuery选择器无法找到可见的最后一个孩子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！