jQuery .index（）總是返回1

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總是其父的第二個孩子

由於您想要基於集合.container .product a的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>