1

div内の画像の位置を見つけようとしています

私のHTML

<div>
  <p>test</p>
  <img src='test1.jpg'/>  
  <p>test</p>
  <p>test</p>  
  <img src='test2.jpg'/>  
  <p>test</p>
  <img src='test2.jpg'/>  --the user clicks this image and I want to know the time it appears. In this case, 2 is what I need.
  <p>test</p>
  <img src='test2.jpg'/>
  <p>test</p>
</div>

私は持っています

var imagePosition=0;
$('img').click(function(){
     var imgSource=$(this).attr('src');
    $(this).closest('div').find('img').each(function(){
       if($(this).attr('src')==imgSource){
          imagePosition++;
       }
    })
})

同じ画像が何回表示されるかはわかりますが、ユーザーがどの画像をクリックしたか、その位置はわかりません。とにかくこれを行うことはありますか？本当にありがとう！

4

2 に答える 2

3 
$('img').click(function() {
    var clickedIndex = $('img[src="'+ $(this).attr('src') +'"]').index(this) + 1;
    console.log(clickedIndex);
});

フィドル

ここでは、クリックされたものと同じソース属性を持つ画像の属性検索を作成し、.index(element)クリックされた要素を参照として渡すことを呼び出します。0ベースindexであるため、1を追加します。

同じ祖先を持つことが重要な場合は、最初のようにそれをdiv適応させます。closestfind

var clickedIndex = 
     $(this).closest('div')
    .find('img[src="'+ $(this).attr('src') +'"]').index(this) + 1;

更新されたフィドル

クリックした画像への参照を取得するにはthis、ハンドラー内でキーワードを使用するだけです。それをjQueryオブジェクト内にラップして、$(this)jQueryメソッドを呼び出すことができます。

また、質問のコードコメントでは、position実際には要素のを意味しているindexと思いますが、要素の文字通りの位置を取得したい場合は、.offset()（ドキュメントに対して）および.position()（親に対して）メソッドを使用できます。

補足：同じソースの画像の数を数える必要がある場合は、次の方法ではるかに簡単に行うことができます.length。

var countImages = $('img[src="'+ $(this).attr('src') +'"]').length;

this繰り返しますが、上記は、画像要素を参照するイベントハンドラーのスコープ内にあることを前提としています。ただし、クエリに簡単に適合させることができsrcます。

于 2013-02-13T04:04:28.893 に答える
1

インデックスを使用できます

   $('img').click(function(){

         index =  $(this).closest('div').find('img').index(this) + 1;

   });
于 2013-02-13T04:04:36.337 に答える