jQuery Ziel vorherigen divs mit Integer-Zahl

Question

ich folgende Konfiguration haben:

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

Von start Klasse div, ich brauche 5 divs es vorherigen Ziel. Damit alle vorherigen 5 eine neue Klasse (addClass) wie unten erhalten wird:

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

Ich habe folgende:

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

Wie würde ich die ganze Zahl verwenden, dies zu tun?

Um es besser zu verdeutlichen, ist die start Klasse der Ausgangspunkt und ich muss die Klasse good zu 5 vorherigen Divs von diesem Ausgangspunkt hinzufügen.

Dank

Answer 1

Sie können alle von ihnen greifen prevAll verwenden und dann nur die ersten fünf dieser vorherigen Elemente von slice verwenden.

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>

Answer 2

Ich würde die folgende verwenden:

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

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

Aktualisiert den Startindex nicht hinzufügen Klasse 'gut'.

https://jsfiddle.net/n2723fmu/

Answer 3

Verwenden .prevAll() die vorherigen Elemente zu bekommen, und .slice() es zu reduzieren, um nur die erste 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>

Answer 4

Try this:

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

Answer 5

Statt prevUntil() Funktion jQuery verwenden, können Sie einfach prev() für Sie wollen über die Anzahl, wie oft verwenden. Ein kurzes Beispiel würde wie folgt aussehen:

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

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