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

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

我正在尝试使用 jQuerys 'each' 函数实现此目的，如下所示：

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

但我只得到 -1 个结果。

Answer 1

听起来你想要 .selected 在其兄弟姐妹中的索引，如果你在没有参数的元素上调用它，这就是 index 给你的。所以在你的 each:

$(this).find(".content .selected").index()

...为您提供所选元素的索引。

实例：

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

<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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

您甚至可以通过使用 map, returning the index out of the callback, and using get 将 jQuery 结果转换为真正的数组来获得这些索引的数组：

var indexes = $(".container").map(function() {
  return $(this).find(".content .selected").index();
}).get();

实例：

var indexes = $(".container").map(function() {
  return $(this).find(".content .selected").index();
}).get();
console.log(indexes);

<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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

我希望你想要 .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>

Answer 3

你可以这样做，使用 Array.prototype.map 和 Array.prototype.reduce 和 Array.prototype.forEach:

const index_arr = $(".container").toArray()
  .map(e=>$(e).find(".item").toArray())
  .reduce((acc, arr)=>{
    arr.forEach((e, i)=>{
      if($(e).hasClass("selected"))
        acc.push(i);
    });
    return acc;
  }, []);

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

Finding index within specific selector descendants

indexing

jquery

descendant