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

我想对每组的前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>

---

这里有一个问题：

您的问题是，引用单个类会引用页面上的所有类，而不管它们出现在哪里。相反，请查看每个组的

子类（）

（您也可以参考该类）

$（'.group'）。每个（函数（）{
$（this）.children（'.item'）。每个（函数（索引，值）{
如果（索引<项目限制）{
$（值）.addClass（'red'）
}
});
});

很简单：）您需要查看当前组的子元素， 因为“.item”是广泛的选择器：） 这是一把小提琴：

HTML:

JavaScript（Jquery）：

var itemLimit=4；
$（'.group'）。每个（函数（索引、值）{
$（值）。子项（“.item”）。每个（函数（索引，值）{
如果（索引<项目限制）{
$（值）.addClass（'red'）
}
});
});

您的

.item

索引

指的是所有

项目的索引

更简单的变体将使用
.find（）
和
：lt（）
选择器


var itemLimit=4；
$（“.group”）.find（“.item:lt（“+itemLimit+”））.addClass（“红色”）
.group{
填充：10px；
}
瑞德先生{
颜色：红色；
}

项目1
项目2
项目3
项目4
项目5
项目6
项目7
项目1
项目2
项目3
项目4
项目5
项目6
项目7

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

.red{
  color: red;
}

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

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

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

var itemLimit = 4;

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