Question

我想知道在点击一个元素之前，某个类中有多少元素出现在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树的开头开始，直到被点击的元素。不要假设这个结构，其中元素是被点击元素的sibilings，它可以有任何类型的结构。

Answer 1

获取与.a匹配的所有先前节点，然后将所有先前节点的后代与.a匹配并加在一起：

var count = $('button').prevAll( '.a' ).length;
count += $('button').prevAll().find('.a').length;
console.log( count );

Answer 2

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

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

虽未测试。

Answer 3

您可以使用.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/

如何在某个元素之前获取类的元素数

3 个答案: