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

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

这样做

Answer 2

使用.filter()获取所有li display: list-item，然后使用.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。

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

2 个答案: