jquery - Jquery计算2个元素之间的项目

Question

我有一个这样的 HTML 树

<div class="container">
    <h1>title</h1>
    <div class="item">1</div>
    <div class="item">2</div>
    <h1>title</h1>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <h1>title</h1>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
</div>

我有一个单击功能，每次选择 div 类项中的图像时都会运行，无论如何我可以计算一个类项彼此相邻的 div 的数量。

即，如果我在上面的示例中单击“1”，它将返回 2，因为在 h1 之前有 2 个 div，如果我单击项目 7，它将返回 5 等等

那可能吗？

谢谢

Answer 1

这将为您工作：

$('.item').on('click',function(){
    var h1 = $(this);
    while(!h1.is('h1')) h1 = h1.prev();
    alert(h1.nextUntil('h1').length);
});

演示

Answer 2

$('.item').click(function () {
        alert($(this).prevAll('h1').first().nextUntil('h1').length);

});

JS 小提琴链接

Answer 3

是的。您可以计算所有具有该类的兄弟姐妹item：

var count = $(this).siblings('.item').andSelf().length;

（在 jQ 1.8 及更高版本中，您应该使用addBack()not andSelf()）

jQuery API 参考非常有帮助，推荐阅读：

• http://api.jquery.com/siblings/
• http://api.jquery.com/addBack/

最重要的是，选择和遍历方法的两大列表：

• http://api.jquery.com/category/selectors/
• http://api.jquery.com/category/traversing/

Answer 4

试试这个

 $(document).ready(function(){
        $('.item').click(function(){

            var title = $(this).prevAll('h1').first();
            var nextElement = title;
            var reachedNextTitle = false;
            var noOfDiv = 0;
            var loopLimit = 1000;
            var count = 0;
            while(!reachedNextTitle){
                count ++;
                nextElement = nextElement.next();
                if(nextElement.is('h1')){
                    reachedNextTitle = true;
                }

                if(nextElement.is('div')){
                    noOfDiv ++;
                }
                if(count > loopLimit){
                    break;
                }
            }

            alert(noOfDiv);
        });
    });