javascript - 在 jquery 中单击按钮获取父级(仅属于特定类)的索引

Question

我有一个无序列表，其中包含一组具有不同类名的列表元素。

当我点击下面脚本中的播放按钮时，我想获取它的父级 (li) 的索引。

但是，.index() 方法给出了 ul 中 li 的索引。我需要索引作为一个特定的类。例如，我有 2 个“播放”按钮。如果我点击第二个“播放”按钮，我需要打印索引 1 ，而不是列表中的实际索引。

$('.audio_btn').unbind('click');
$('.audio_btn').bind('click', function(event){
    alert($(this).parents('.audio').index());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="myList">
    <li class="text">My Text</li>
    <li class="audio"><input type="button" class="audio_btn" value="play"></li>
    <li class="video">My Video</li>
    <li class="text">My Text</li>
    <li class="text">My Text</li>
    <li class="text">My Text</li>
    <li class="audio"><input type="button" class="audio_btn" value="play"></li>
    <li class="text">My Text</li>
    <li class="text">My Text</li>
</ul>

Answer 1

使用$('.audio')集合作为待定索引的来源

$('.audio_btn').unbind('click');
$('.audio_btn').bind('click', function(event) {
  console.log($('.audio').index($(this).parents('.audio')));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="myList">
  <li class="text">My Text</li>
  <li class="audio">
    <input type="button" class="audio_btn" value="play">
  </li>
  <li class="video">My Video</li>
  <li class="text">My Text</li>
  <li class="text">My Text</li>
  <li class="text">My Text</li>
  <li class="audio">
    <input type="button" class="audio_btn" value="play">
  </li>
  <li class="text">My Text</li>
  <li class="text">My Text</li>
</ul>