Question

我正在尝试根据所单击元素的索引创建一个代码块。问题是无论我点击哪个元素都会吐出1。

$(document).ready(function() {
  
  $('.container .product a').click(function() {
    var a = $(this).index();
    
    alert(a);
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="product">
    <div class="product-body">
      <img src="https://placehold.it/50x50" />
      <a href="#">Buy Me!</a>
    </div>
  </div>
  <div class="product">
    <div class="product-body">
      <img src="https://placehold.it/50x50" />
      <a href="#">Buy Me Also!</a>
    </div>
  </div>
  <div class="product">
    <div class="product-body">
      <img src="https://placehold.it/50x50" />
      <a href="#">M Three!</a>
    </div>
  </div>
</div>

Answer 1

这是因为调用$(this).index()将根据其兄弟姐妹返回this的索引，在您的情况下，a始终是其父级的第二个孩子

由于您希望基于集合a建立.container .product a索引，因此您可以使用.index()的以下任一变体

$(document).ready(function() {

  var $as = $('.container .product a').click(function() {
    var a = $as.index(this); //or $(this).index('.container .product a');

    alert(a);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="product">
    <div class="product-body">
      <img src="https://placehold.it/50x50" />
      <a href="#">Buy Me!</a>
    </div>
  </div>
  <div class="product">
    <div class="product-body">
      <img src="https://placehold.it/50x50" />
      <a href="#">Buy Me Also!</a>
    </div>
  </div>
  <div class="product">
    <div class="product-body">
      <img src="https://placehold.it/50x50" />
      <a href="#">M Three!</a>
    </div>
  </div>
</div>

Answer 2

有关index()方法的详细信息，请查看Jquery - index

$(document).ready(function() {
  
  $('.container .product a').click(function() {
     var a =  $(".container .product a").index( this );        
     alert(a);
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="product">
    <div class="product-body">
      <img src="https://placehold.it/50x50" />
      <a href="#">Buy Me!</a>
    </div>
  </div>
  <div class="product">
    <div class="product-body">
      <img src="https://placehold.it/50x50" />
      <a href="#">Buy Me Also!</a>
    </div>
  </div>
  <div class="product">
    <div class="product-body">
      <img src="https://placehold.it/50x50" />
      <a href="#">M Three!</a>
    </div>
  </div>
</div>

jQuery .index（）总是返回1

2 个答案: