jquery - 使用jquery获取div的索引

Question

<div class="top">
    <div class="hp_class">
        This is div1.
    </div>
    <div>
        <form id="newsletter" name="myForm" method="post">    
            <div class="hp_rt">
                <div class="subscribe subs_failure">Subscribe now</div>
            </div>
        </form>
    </div>
    <div class="hp_class">
        This is div3.
    </div>
</div>

div我需要标签的索引，

例如，如果我点击Subscribe now，我需要它的索引为 2

我试过的代码是

$('.hp_rt>.subscribe').click(function(){
    var div_count=$(this).parent('.hp_promo_rt').parents('div').index($(this).parent('.hp_rt').parents('div'));
    alert(div_count);
});

Answer 1

我建议：

$('.subscribe').click(function(){
    var i = $(this).closest('form').parent().index();
    console.log(i);
});

JS 小提琴演示。

尽管 JavaScript 是从零开始的，所以这将返回（给定您发布的 HTML）1，而不是2.

参考：

• closest().
• index().
• parent().

Answer 2

所以我知道你想要与 的直接子级相关的索引.top，使用这个

$('.hp_rt>.subscribe').click(function(){
   alert($(this).closest('.top > div').index());
});

这将为您提供一个从零开始的索引，您可以添加 1 以将警报设为“2”

Answer 3

你可以这样做：

$('.hp_rt>.subscribe').click(function() {
    var $div = $(this).parents('.top > div'); // This is the Div you want the index of!
    var $prevs = $div.prevAll('div'); // This are all the Divs before the Div!
    var number = $prevs.size() + 1; // There is one div before the div in question, so this gives 2 in this case.
});

或者，您可以使用 index()：

$('.hp_rt>.subscribe').click(function() {
    var $div = $(this).parents('.top > div'); // This is the Div you want the index of!
    var number = $div.index() + 1;
});