jQuery选择器无法找到可见的最后一个孩子

Question

这是我的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选择器：

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

我希望它在th（可能是PickerTHEAD）内找到最后一次可见 <th>Unit Price</th>，但找不到任何内容。

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

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

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

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

Answer 1

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

  

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

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

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

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>

Answer 2

您正在使用:last-child Selector来选择作为其父级的最后一个子级的所有元素。

您将需要使用:last Selector来选择最后一个匹配的元素。

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

console.log(th.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>

Answer 3

您可以使用eq()从可见元素中选择最后一个元素：

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

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>