Muszę jakoś dodać styl inline dla każdego elementu, który jest poza określonym progiem. Aby wyjaśnić to w formacie kodu, moja próbka jest to:

var listItems = $(".subitem");
    listItems.each(function(index, value) {
        console.log(listItems.length);
        if (listItems.length > 5) {
            // for every ".subitem" that is the 6th, 7th or however many but
            // beyond the fifth, inject an inline style
        }
 }

Moja pierwsza myśl była nth-child i nth-of-type ale są zarówno w jakim znacznik luźno następuje:

<div>
  <div class="subitem"></div>
</div>
<div>
  <div class="subitem"></div>
</div>
<div>
  <div class="subitem"></div>
</div>

Dzięki tej strukturze znacznika (nie można zmienić), jak najlepiej iterować przez każdą instancję {X0}} i dodać styl inline do zdarzeń, które są poza limitem?

0
kawnah 4 czerwiec 2018, 20:51

3 odpowiedzi

Najlepsza odpowiedź

Tak blisko. Jak widać, indeks jest przekazywany podczas pętli przez elementy listy. Jeśli widzisz indeks poza 4 (to jest, po piątym elemencie), możesz użyć jquery, aby zastosować pragnienie stylizacji.

var listItems = $(".subitem");
    listItems.each(function(index, value) {
        if (index > 4) {
            // apply styling specific to elements 6 and beyond
        }
 }
2
larz 4 czerwiec 2018, 17:55

Może filtrować za pomocą :gt() selektor lub {X1}}, aby wykluczyć indeksy poniżej zestawu wartości.

listItems.filter(':gt(4)').each(function(){
   $(this).doSomething()       
})
// or
$(".subitem:gt(4)").each(function(){...
// or using slice()
listItems.slice(4).each(function(){
1
charlietfl 4 czerwiec 2018, 18:11

Sprawdzasz, czy długość jest więcej niż 6, zamiast sprawdzać, czy sam element jest poza szóstym.

Ponieważ parametr "indeks" jest położenie elementu, który jest itterujący w tym mence, powinieneś go używać:

   var listItems = $(".subitem");
listItems.each(function(index, value) {
    if (index > 5) {
        $(this).css("color","red");
    }
 });
0
Verònica Jandrew 4 czerwiec 2018, 18:00