如何检查元素的父元素本身是否是使用javascript或jquery的最后一个孩子

Question

如何检查具有特定数据属性的父元素是否是“最后一个子元素”本身？基本上，要记住，他们会产生，大多数<tbody>的数据属性 - data-state="closed" - 我想检查他们中的一个是否是最后一个，当我点击一个子元素，这是一个链接，这是在里面。

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> 

非常感谢

Answer 1

我可能会使用nextAll：

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

或者，如果你知道具有data-state属性的所有tbody元素彼此相邻（例如，末尾没有的最后一个总是总是），则可以仅使用next('tbody[data-state]')而不是nextAll('tbody[data-state]')。但它并不真的给你买得多，而且增加了这个假设。

Answer 2

你可以得到有data-attribute然后tbody元素的数目检查当前tbody元素的索引：

$(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*/ } 
}); 

文档为.index()：http://api.jquery.com/index

在一个侧面说明，你的如果使用类而不是数据属性，代码将执行得更快：

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*/ } 
}); 

如果使用类，那么你可以采取的getElementByClass()优势，这比attributes搜索快得多（需要寻找通过在搜索的范围每一个DOM节点） 。