如何檢查元素的父元素本身是否是使用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節點） 。