3

我有一个这样的 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 等等

那可能吗?

谢谢

4

4 回答 4

5

这将为您工作:

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

演示

于 2013-04-12T09:37:07.940 回答
2
$('.item').click(function () {
        alert($(this).prevAll('h1').first().nextUntil('h1').length);

});

JS 小提琴链接

于 2013-04-12T10:19:08.063 回答
1

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

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

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

jQuery API 参考非常有帮助,推荐阅读:

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

于 2013-04-12T09:22:11.600 回答
-1

试试这个

 $(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);
        });
    });
于 2013-04-12T09:58:14.793 回答