要素の親要素がjavascriptまたはjqueryの最後の子要素であるかどうかを確認する方法

Question

クリックする要素の親要素が特定のデータ属性で「最後の子」であるかどうかを確認するにはどうすればよいですか？自体？基本的に、それらが生成されることを念頭に置いて、<tbody>のほとんどはデータ属性 - data-state="closed"を持っています。そして、私がリンクである子要素をクリックすると、そのうちの1つが最後のものかどうかを確認したいと思います。その中。

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要素のすべてが（例えば、1の終わりに常にである必要はありませんので、最後の1）は、あなただけではなく、next('tbody[data-state]')nextAll('tbody[data-state]')使用することができ、互いの隣にある知っています。しかし、実際にはそれほどあなたを買わないし、それは前提を追加する。

Answer 2

あなたはdata-attributeを持っているtbody要素の数を取得し、現在のtbody要素のインデックスをチェックすることができます：.index()ため

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

ドキュメント：サイドノートではhttp://api.jquery.com/index

を、あなたの

HTML--

の代わりにクラスを使用すると、コードの実行速度が向上します0

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

あなたがクラスを使用する場合、あなたは、（検索の範囲内のすべてのDOMノードを介して見ている必要）attributesで検索よりもはるかに高速であるgetElementByClass()を活用することができます。