jQuery的目標與整數

以前的div我有以下設置：jQuery的目標與整數

<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類格，我需要針對5個格以前給它。所以，所有的前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。

感謝

來源

2016-09-28 steve Kim

Corret我，如果我錯了。你想添加一個類到所有5個div，跟在第一個之後？那麼所有那些也有「好」類的人呢？ – Aer0

重複的：http://stackoverflow.com/questions/1022595/select-nth-previous-sibling-in-jquery？ – Puzzle84

爲了更好地闡明它，'start'類是一個起點，我需要從這個起點向5個先前的div添加'good'類。 –

可以使用prevAll抓住所有的人，然後只用slice把這些以前的元素的第5位。

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

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

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

來源

2016-09-28 21:53:33

我會用以下內容：

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

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

更新不添加類 '好' 的開始索引。

https://jsfiddle.net/n2723fmu/

來源

2016-09-28 21:49:11

使用.prevAll()獲得由先前的元素，並.slice()減少它只是第5

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

.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; 
 
}

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

來源

2016-09-28 21:56:45 Barmar

試試這個：

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

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

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

來源

2016-09-28 22:02:14 Ehsan

而不是使用jQuery的prevUntil()功能，你可以簡單地使用prev()關於您所要的次數。一個簡單的例子是這樣的：

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

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

來源

2016-09-28 22:05:14 Aer0

jQuery的目標與整數

回答

相關問題