jquery - 在特定选择器后代中查找索引

Question

我的简化场景:

<div id="container-1" class="container">
  <div class="content">
    <div class="item selected"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

<div id="container-2" class="container">
  <div class="content">
    <div class="item"></div>
    <div class="item selected"></div>
    <div class="item"></div>
  </div>
</div>

我需要在每个 class="container"的 class="content"中找到 class="selected"的索引，因此上述场景的预期结果是:

0, 1

我正在尝试使用 jQuery 的“each”函数来实现这一点，如下所示:

$('.container').each(function()
{
  $(this).find('.item').index('.selected'); 
  $('#' + $(this).attr('id') + ' .item').index('.selected');
  $(this).find('.selected').index();
});

但我只得到 -1 结果。

Answer 1

我希望你想要 .selected 与其同级的索引，所以如下所示:-

$('.container .content').each(function(){
  console.log($(this).children('.selected').index()); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container-1" class="container">
  <div class="content">
    <div class="item selected"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

<div id="container-2" class="container">
  <div class="content">
    <div class="item"></div>
    <div class="item selected"></div>
    <div class="item"></div>
  </div>
</div>

<div id="container-2" class="container">
  <div class="content">
    <div class="item selected"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>