Question

我有以下设置：

<div class="item"></div>
<div class="item"></div>
<div class="item"></div>//Need to target this
<div class="item"></div>//Need to target this
<div class="item"></div>//Need to target this
<div class="item"></div>//Need to target this
<div class="item"></div>//Need to target this
<div class="item start"></div>//starting point
<div class="item"></div>

从start类div开始，我需要定位前面的5个div。所以之前的5个将获得一个新的类（addClass），如下所示：

<div class="item"></div>
<div class="item"></div>
<div class="item good"></div>
<div class="item good"></div>
<div class="item good"></div>
<div class="item good"></div>
<div class="item good"></div>
<div class="item start"></div>//starting point
<div class="item"></div>

我有以下内容：

var num = 5; //integer number
$(".start").prevUntil(??).addClass('good'); //??

我如何使用整数来执行此操作？

为了更好地澄清它，start类是起点，我需要从这个起点将类good添加到前面的5个div中。

由于

Answer 1

我会使用以下内容：

var startIndex = $('.start').index();
var endIndex = startIndex - 5;

for(var i = startIndex - 1; i >= endIndex; i--){
    $('.item').eq(i).addClass('good');
}

更新为不添加课程＆＃39; good＆＃39;起始指数。

https://jsfiddle.net/n2723fmu/

Answer 2

您可以使用prevAll抓取所有这些内容，然后使用slice仅获取前五个元素。

＆＃13;

var num = 5;
$(".start").prevAll().slice(0, num).addClass('good');

＆＃13;

.item::after {
  content: "ITEM";
}
.item.start::after {
  content: "START";
}
.item.good::after {
  content: "GOOD";
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item start"></div>
<div class="item"></div>

＆＃13;

Answer 3

使用.prevAll()获取前面的元素，使用.slice()将其缩小到前5个元素。

＆＃13;

$('.start').prevAll('div').slice(0, 5).addClass('good');

＆＃13;

.item {
  height: 50px;
  width: 50px;
  background-color: yellow;
  border: solid black 1px;
  display: inline-block;
}
.item.good {
  background-color: blue;
}
.item.start {
  background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item start"></div>
<div class="item"></div>

＆＃13;

Answer 4

试试这个：

＆＃13;

$(document).ready(function(){
     
     $(".start").prevAll("div").slice(0,5).addClass("good");
     
 })

＆＃13;

.item::after {
  content: "ITEM";
}
.item.start::after {
  content: "START";
}
.item.good::after {
  content: "GOOD";
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item start"></div>
<div class="item"></div>

＆＃13;

Answer 5

您可以简单地使用prevUntil()来表示您想要的次数，而不是使用jQuery的prev()功能。一个简单的例子如下：

var el = $('.start');
for (var i = 0; i < 5; i++) {
  el = el.prev();
  el.addClass('good');
}

https://jsfiddle.net/dzyvxzp3/1/

jQuery使用整数来定位前面的div

5 个答案: