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
}

或者如果您知道所有具有tbody属性的data-state元素彼此相邻（例如，最后一个没有next('tbody[data-state]')元素的元素最后总是），你可以使用nextAll('tbody[data-state]')而不是{{1}}。但它并没有给你带来太大的收益，它增加了这个假设。

Answer 2

您可以获取具有tbody的{{1}}元素的数量，然后检查当前data-attribute元素的索引：

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*/ } });的文档：http://api.jquery.com/index

另外，如果您使用类而不是数据属性，您的代码将执行得更快：

HTML -

.index()

JS -

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

如果您使用类，那么您可以利用$(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()搜索要快得多（这需要查看搜索范围内的每个DOM节点）。

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

2 个答案: