Wie erhalten Sie die ersten und letzten Werte in jQuery mit einem bestimmten Stil?

Question

<ul id="itemContainer"> 
<li data-number="1" style="display: none;"></li> 
<li data-number="2" style="display: none;"></li> 
<li data-number="3" style="display: list-item;"></li> 
<li data-number="4" style="display: list-item;"></li> 
<li data-number="5" style="display: list-item;"></li> 
</ul> 

Ich möchte den Wert der Daten-Anzahl der ersten und letzten Elemente von li mit Display bekommen: list-item so mit diesem Beispiel i 3 und 5

if ($("#itemContainer>li").css('display') == 'list-item'){ 
    var first = parseInt($("#itemContainer>li").first().data("number"), 10); 
    var last = parseInt($("#itemContainer>li").last().data("number"), 10); 
    $("#itemContainer>li").hide().slice(first, last).show(); 
} 

im always 1 immer bekommen sollte und 5?

Answer 1

Verwenden .filter() alle li mit display: list-item zu bekommen, dann .first() und .last() verwenden Sie die entsprechenden Elemente aus dieser Untergruppe auszuwählen.

var lis = $("#itemContainer>li").filter(function() { 
 
    return $(this).css('display') == 'list-item'; 
 
}); 
 
var first = lis.first().data("number"); 
 
var last = lis.last().data("number"); 
 
$("#itemContainer>li").hide().slice(first, last).show(); 
 
$("#first").text(first); 
 
$("#last").text(last);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="itemContainer"> 
 
    <li data-number="1" style="display: none;">1</li> 
 
    <li data-number="2" style="display: none;">2</li> 
 
    <li data-number="3" style="display: list-item;">3</li> 
 
    <li data-number="4" style="display: list-item;">4</li> 
 
    <li data-number="5" style="display: list-item;">5</li> 
 
</ul> 
 
First = <span id="first"></span><br> 
 
Last = <span id="last"></span>

BTW, brauchen Sie nicht parseInt zu verwenden, da .data() den Datenwert als JSON analysiert.

Answer 2

$("#itemContainer li").each(function() {//iterate through each li 
 
    
 
    if ($(this).css('display') == 'list-item') {//check the display 
 
    var first = parseInt($("#itemContainer li").first().data("number"), 10); 
 
    var last = parseInt($("#itemContainer li").last().data("number"), 10); 
 
     
 
     console.log(first+ " " + last)//log first and last 
 
    $("#itemContainer li").hide().slice(first, last).show(); 
 
    } 
 

 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="itemContainer"> 
 
    <li data-number="1" style="display: none;"></li> 
 
    <li data-number="2" style="display: none;"></li> 
 
    <li data-number="3" style="display: list-item;"></li> 
 
    <li data-number="4" style="display: list-item;"></li> 
 
    <li data-number="5" style="display: list-item;"></li> 
 
</ul>

Tun Sie dies