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

【问题标题】：Finding index within specific selector descendants在特定选择器后代中查找索引
【发布时间】：2017-09-02 09:51:20
【问题描述】：

我的简化场景：

<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="content" 中为每个 class="container" 找到 class="selected" 的索引，因此上述场景的预期结果是：

0, 1

我正在尝试使用 jQuerys 的“每个”函数来实现这一点，如下所示：

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

但我只得到 -1 个结果。

【问题讨论】：

标签： jquery indexing descendant

【解决方案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>

【讨论】：

【解决方案2】：

听起来你想要 .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 获取这些索引的数组，从回调中返回索引，并使用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>

【讨论】：

【解决方案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;
  }, []);

【讨论】：