Question

我发誓我之前已经做过，但是我试图对div中的前5个项目进行计数，然后向其中添加一个类，然后向其余部分添加一个类。

我有这个：

var counter = 0;
$('.images img').each(function(i) {
   if (i == 0) {
       counter = 0;
   } else {
       counter++;
   }
   if (counter < 5) {
       $(this).addClass('this');
   } else {
     $(this).addClass('other');
   }
});

这行得通，但我认为可以将其清理一下。有什么建议可以使其更精简吗？

Answer 1

使用jQuery，您可以使用:lt()（索引从零开始）

$('.images img:lt(5)').addClass('this')

Answer 2

最简单的解决方案是不使用JavaScript，而仅使用CSS选择器。第n个孩子可以让您定位一系列商品。

li {
  background-color: yellow;
}

li:nth-child(-n+5) {
  background-color: green;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
</ul>

如果要使用jQuery，可以使用.slice(start, end)

对其进行简化。

var lis = $('li');
lis.slice(0,5).addClass('on');
lis.slice(5).addClass('off');

.off {
  background-color: yellow;
}

.on {
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
</ul>

或者您可以使用.addClass(function)

中的function选项

$('li').addClass( function (index) {
 return index < 5 ? 'on' : 'off';
})

.off {
  background-color: yellow;
}

.on {
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
</ul>

Answer 3

要获得预期结果，请使用以下选项

使用.each循环div
检查索引并添加类
在第5个元素之后使用return false从循环退出

$('div').each(function(index) {
  if(index < 5){
    $(this).addClass('mark')
}else {
return false;
  }
})

.mark{
  color: red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>1</div>
<div>1</div>

Answer 4

或者，您也可以使用.images img：nth-child（-n + 5）{stuff}来使用纯CSS

.test {
  color: green;
  background: yellow;
}

.img span:nth-child(-n+3) {
  color: red !important;
  background: blue;
}

<div class="img">
  <span class="test">TEST</span>
  <span class="test">TEST</span>
  <span class="test">TEST</span>
  <span class="test">TEST</span>
  <span class="test">TEST</span>
</div>

使用jQuery将Class添加到div的前5个元素

4 个答案: