Question

我想对每组的前4个元素执行操作。

我遇到的问题是它在迭代下一组时似乎没有重置计数。

在这个例子中，每组的前四项应该是红色的，但它只适用于第一组，而不是第二组...请帮助：）

HTML

<div class="group">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
  <div class="item">Item 7</div>
</div>
<div class="group">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
  <div class="item">Item 7</div>
</div>

的jQuery

var itemLimit = 4;
$('.group').each(function(){
  $('.item').each(function(index, value){
    if(index < itemLimit){
      $(value).addClass('red')
    }
  });
});

CSS

.red{
  color: red;
}

这是一个小提琴：https://jsfiddle.net/a4zja9th/

Answer 1

您的.item index指的是所有这些.item ¹的索引。

更简单的变体将使用.find()和:lt()选择器

＆＃13;

var itemLimit = 4;

$(".group").find(".item:lt("+itemLimit+")").addClass("red");

＆＃13;

.group{
  padding: 10px;
}
.red{
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="group">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
  <div class="item">Item 7</div>
</div>
<div class="group">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
  <div class="item">Item 7</div>
</div>

＆＃13;

想要做更多的事情，而不仅仅是.addClass()？在已经过滤的元素集合上使用.each()：

$(".group").find(".item:lt("+itemLimit+")").each(function() {
   // addClass
   // or whatever you want
});

1）以上是我的工作方式......现在让我们解释一下您的问题：

// DON'T USE!! JUST FOR EXPLANATION:
$('.group').each(function() {
  $('.item').each(function(index, value) { // You're taking all .item from the DOM

    console.log($(this).index(), index);  // See the difference in console!

    if($(this).index() < itemLimit) {     // Using $(this).index();
      $(value).addClass('red')
    }
  });
});

...因为index是所有 .item集合中每个.item的索引。
而$(this).index()是.item 其父.group内的实际索引。

[jsFiddle使用.index()代替.each(index] [1]

要正确推荐 .item 孩子（this）.group，您可以使用$('.item', this).each(或$(this).find(".item").each(

var itemLimit = 4;

$('.group').each(function() {
  $('.item', this).each(function(index, value) {
    if(index < itemLimit) {
      $(value).addClass('red')
    }
  });
});

<强> jsFiddle Fixed child reference

Answer 2

很简单:)你需要查看当前组的子元素，因为“.item”是广泛的选择器:) 这是一个小提琴：https://jsfiddle.net/a4zja9th/1/

HTML：

<div class="group">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
  <div class="item">Item 7</div>
</div>
<div class="group">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
  <div class="item">Item 7</div>
</div>

CSS：

.group{
  padding: 10px;
}
.red{
  color: red;
}

的JavaScript（Jquery的）：

var itemLimit = 4;

$('.group').each(function(index,value){
  $(value).children(".item").each(function(index, value){
    if(index < itemLimit){
      $(value).addClass('red')
    }
  });
});

Answer 3

您的问题是，引用单个类是指页面上的所有类，无论它们出现在何处。而是查看每个组的children()（您也可以参考该类）

$('.group').each(function(){
  $(this).children('.item').each(function(index, value){
    if(index < itemLimit){
      $(value).addClass('red')
    }
  });
});

jQuery - 为每个（）元素重复each（）但在循环之间重置

3 个答案: