jquery selector unable to find visible last-child

Answer 1

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

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>

Answer 2

You can use eq() to select the last element from the visible ones:

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>

Answer 3

You are using :last-child Selector which selects all elements that are the last child of their parent.

You will need to use :last Selector that selects the last matched element.

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>