私は、次のHTML持つ要素

Question

のリスト内の要素のインデックスを取得します：私が得る

$.fn.slider = function() { 

    $(this).each(function() { 

     var $this = $(this); 

     var $pages = $this.find("button"); 

     $pages.on("click", function (element) {    
     console.log($(element).index($pages)); 
     }); 

次のコードクラス「NAV」で一覧表示するには、「この」リーファーで

<ul class="nav"> 
    <li><button></button></li> 
    <li><button></button></li> 
</ul> 

を出力：-1にconsole.log

には、基本的に私は

がなぜ...リスト内のボタンのインデックスを取得しようとしていますこれが起こる？

Answer 1

使用index()方法とにパラメータとしてthisを渡しますボタンをクリックして値を取得します。

$(document).on("click", "ul > li > button", function() { 
 
    console.log($("ul > li > button").index(this)); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="nav"> 
 
    <li><button>Button 1</button></li> 
 
    <li><button>Button 2</button></li> 
 
</ul>

Answer 2

ボタンのindexを取得する方法は、それぞれliにbuttonの1つがあるので、<li>のインデックスを取得しています。ただ、このような：

$('ul.nav li').click(function(){ 
 
    console.log($(this).index()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<ul class="nav"> 
 
    <li><button>1</button></li> 
 
    <li><button>2</button></li> 
 
    <li><button>3</button></li> 
 
</ul>

のみ（全体ではなくページ上の）特定の親でindex()関数「数」要素