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 =＆＃34; select＆＃34;的索引在课堂上=＆＃34;内容＆＃34;对于每个类=＆＃34;容器＆＃34;，所以上述场景的预期结果将是：

0, 1

我试图通过jQuerys＆＃39;每个人来实现这一目标。功能如下：

$('.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>

Answer 2

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

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

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

直播示例：

＆＃13;

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

＆＃13;

<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>

＆＃13;

您甚至可以使用map获取这些索引的数组，将索引从回调中返回，并使用get将jQuery结果转换为真正的数组：

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

直播示例：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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;
  }, []);

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

3 个答案: