1

我的简化方案：

<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的结果。

4

3 回答 3

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>

于 2017-09-02T09:56:03.440 回答
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>

您甚至可以通过 using 获取这些索引的数组，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>

于 2017-09-02T09:54:24.413 回答
0

你可以这样做，使用Array.prototype.mapandArray.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;
  }, []);
于 2017-09-02T10:19:53.307 回答