How to check if the parent element of an element is in itself the last child with javascript or jquery

Question

How can I check if the parent, with a certain data attribute, of the element I'm clicking is a 'last child' itself? Basically, bearing in mind that they gonna be generated, most of the <tbody> 's have a data attribute - data-state="closed" - and I wanna check if one of them is the last one when I click on a child element, which is a link, that's inside it.

JS/jquery:

$('body').delegate('a[data-view="showhide"]', 'click', function (e) {
     var thisElem = $(this),
         thisTbody = thisElem.closest('tbody');

     e.preventDefault();

     //check to see if this element's parent is a last child
     if (thisTbody.filter('[data-state]').is(':last')) {
        console.log('this is the last tbody of its kind called \'data-state\'');
        //...Do something
     }
});

HTML:

<table>
  <tbody data-state="closed">
    <tr><td><a href="#" data-view="showhide">cell 1</a></td></tr>
  </tbody>
  <tbody data-state="closed">
    <tr><td><a href="#" data-view="showhide">cell 2</a></td></tr>
  </tbody>
  <tbody data-state="closed">
    <tr><td><a href="#" data-view="showhide">cell 3</a></td></tr>
  </tbody>
  <tbody>
    <tr><td>cell not important</td></tr>
  </tbody>
</table>

Many thanks

Answer 1

I'd probably use nextAll :

if (!thisTbody.nextAll('tbody[data-state]')[0]) {
    // It's the last `tbody` with a `data-state` attribute in its
    // enclosing table
}

Or if you know that all of the tbody elements that have a data-state attribute are next to each other (eg, that last one that doesn't have one is always at the end), you could just use next('tbody[data-state]') rather than nextAll('tbody[data-state]') . But it doesn't really buy you much, and it adds the assumption.

Answer 2

You can get the number of tbody elements that have the data-attribute and then check the index of the current tbody element:

$(document).delegate('a[data-view="showhide"]', 'click', function (e) {
     var thisElem = $(this),
         thisTbody = thisElem.closest('tbody[data-state]'),
         thisIndex = thisTbody.index(),//get the index of the currently selected `tbody` element
         thisCount = thisElem.closest('table').find('tbody[data-state]').length;//get the number of `tbody` elements with the `data-state` attribute

     e.preventDefault();

     //see if the current index is equal to the total number of `tbody[data-state]` elements (remember that `.length` starts at one)
     if (thisIndex == (thisCount - 1)) { /*It has been found that this is the last element*/ }
});

Docs for .index() : http://api.jquery.com/index

On a side-note, your code will perform faster if you use classes instead of data-attributes:

HTML--

<table>
  <tbody class="closed">
    <tr><td><a href="#" class="showhide">cell 1</a></td></tr>
  </tbody>
  <tbody class="closed">
    <tr><td><a href="#" class="showhide">cell 2</a></td></tr>
  </tbody>
  <tbody class="closed">
    <tr><td><a href="#" class="showhide">cell 3</a></td></tr>
  </tbody>
  <tbody>
    <tr><td>cell not important</td></tr>
  </tbody>
</table>

JS--

$(document).delegate('a.showhide', 'click', function (e) {
     var thisElem = $(this),
         thisTbody = thisElem.closest('tbody.closed'),
         thisIndex = thisTbody.index(),
         thisCount = thisElem.closest('table').find('tbody.closed');

     e.preventDefault();

     //check to see if this element's parent is a last child
     if (thisIndex == (thisCount - 1)) { /*It has been found that this is the last element*/ }
});

If you use classes then you can take advantage of getElementByClass() which is much faster than searching by attributes (which require looking through every DOM node in the scope of the search).