jQuery：クラスのグループ内でクラスの番号付き位置を見つける方法

Question

私は同じクラスのimg要素のグループを持っています。これらimg要素の一つをクリックすると

<!--div of img elements--> 
<div id="container"> 
    <img class="square" src="one.jpg"/> 
    <img class="square" src="two.jpg"/> 
    <img class="square" src="three.jpg"/> 
    <img class="square" src="four.jpg"/> 
    <img class="square" src="five.jpg"/> 
</div> 

、私はコンソールにそのimgの番号の位置を記録したいと思います。たとえば、<img class="square" src="two.jpg"/>がクリックされた場合、その要素はclass="square"の2番目の要素であるため、コンソールに2を記録したいと思います。私はここで、this previous Stack Overflow questionを参照

を試してみた何

は、私は私のコードでは、これまでに使用しようとしたものです：コンソールで

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

<script> 

    //click an image with class="square" 
    $(".square").click(function() { 
    //find position of clicked image within classes "square" 
    console.log($(this).index('#container') + 1); 

</script> 

結果は常に0です。私はこれで間違って何をしていますか？

Answer 1

"#container"を削除すると、コンテナ内の要素のインデックスが表示されます。 jQueryのAPIドキュメントから

：

引数が.INDEX（）メソッドに渡されていない場合、戻り値は jQueryオブジェクトの相対内の最初の要素の位置を示す 整数です。その兄弟要素。それをしなかった

$(".square").click(function() { 
 
    //find position of clicked image within classes "square" 
 
    console.log($(this).index() + 1); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <img class="square" src="one.jpg"/> 
 
    <img class="square" src="two.jpg"/> 
 
    <img class="square" src="three.jpg"/> 
 
    <img class="square" src="four.jpg"/> 
 
    <img class="square" src="five.jpg"/> 
 
</div>

Answer 2

$(".square").bind("click", function(){ 
 
    var imgs = $(".square"); 
 
    var curIdx = imgs.index($(this)); 
 
    alert(curIdx); 
 
});

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

 

 
<div id="container"> 
 
    <img class="square" src="one.jpg"/> 
 
    <img class="square" src="two.jpg"/> 
 
    <img class="square" src="three.jpg"/> 
 
    <img class="square" src="four.jpg"/> 
 
    <img class="square" src="five.jpg"/> 
 
</div>