2

我想知道在单击某个元素之前某个类的多少元素出现在 DOM 中。

<html>
  <div class="a">
  </div>
  <div class="b">
      <div class="a">
      </div>
  </div>
  <button>CLick me!</button>
  <div class="a">
  </div>
</html>

所以在前面的 DOM 树中，如果要单击的元素是按钮，并且我正在寻找具有类“a”的 div，它应该返回 2，即使在整个树中有 3 个，但“之前”按钮只有2.

我怎么能那样做？

谢谢

[编辑] 元素的搜索从 DOM 树的开头开始，直到被点击的元素。不要假设元素是单击元素的兄弟姐妹的结构，它可以具有任何类型的结构。

4

3 回答 3

2

获取所有先前的节点匹配.a，然后获取所有先前节点的后代匹配.a并相加：

var count = $('button').prevAll( '.a' ).length;
count += $('button').prevAll().find('.a').length;
console.log( count );
于 2012-09-06T18:23:51.803 回答
0

您可以使用.not()进行过滤

$('button').click(function(){
    var $this = $(this);
    console.log(
             $('.a')
                   // get all with class=a not including all after..descendants after  
                   .not($this.nextAll('.a'), $('.a',$this.nextAll('*')))
                   // get number of elements returned
                   .length
     );

});​

http://jsfiddle.net/Gz9v2/

于 2012-09-06T18:26:41.837 回答
0

试试这个，获取与类匹配的所有 prev 元素，然后是与类匹配的那些 prev 元素的所有子元素。

$("button").click(function() {
    var prev = $(this).prevAll(this.className);
    console.log( prev.length + prev.find(this.className).length );
});

虽然没有测试。

于 2012-09-06T18:24:04.847 回答