ここで父親要素

Question

からインデックスを取得する方法を、私は子供のインデックスを取得したい

<div id="father"> 
     <div class="child"></div> 
     <div class="child"></div> 
     <div class="child"></div> 
</div> 

次のHTMLです。 jQueryので は、最初にインデックス を得るために何かあります、我々は最初のdivをクリックして、取得インデックス0

$(".child").click(function(alert($(this).index())}; 

をしかし、HTMLがあるとき：

<div id="father"> 
     <div class="child"></div> 
     <div class="child"></div> 
     <p>some text</p> 
     <div class="child"></div> 
</div> 

たちを4番目のdivをクリックしてインデックスを取得しない3 2 私は、または何らかの方法を試してみるが、役に立たない。

$(".child").index(":not(p)"); 

要件を満たすことができる簡単な方法がありますか？

ありがとうございます！

Answer 1

また、クラス "子供" を持って、前の兄弟を数えることができます。参考のため

$('.child').click(function() { 
 
    var count = $(this).prevAll('.child').length; 
 
    console.log(count); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="father"> 
 
     <div class="child">AAA</div> 
 
     <div class="child">BBB</div> 
 
     <p>CCC</p> 
 
     <div class="child">DDD</div> 
 
</div>

は、チェック：https://api.jquery.com/prevall/

Answer 2

使用.index()クリック<div>の場所を見つけるために親と比較して選択範囲のみを#father > divにフィルタリングします。

$("#father > div").click(function() { 
 
    console.log($(this).index()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="father"> 
 
     <div class="child">Foo</div> 
 
     <div class="child">Bar</div> 
 
     <p>some text</p> 
 
     <div class="child">FooBar</div> 
 
</div>