javascript - 如何获取jquery中特定样式的第一个和最后一个值？

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>

我想通过 display: list-item 获取 li 的第一个和最后一个元素的 data-number 值，因此在这个例子中我应该得到 3 和 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(); 
}

我总是得到 1 和 5？

Answer 1

使用.filter()获取所有带有display: list-item的li，然后使用.first() 和 .last() 从此子集中选择适当的元素。

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>

顺便说一句，您不需要使用 parseInt，因为 .data() 将数据值解析为 JSON。