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

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

i want to get the value of data-number of first and last elements of li with display: list-item so with this example i should get 3 and 5

我想用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(); 
}

im always getting 1 and 5?

我总是得到1和5?

2 个解决方案

#1

Use .filter() to get all the li with display: list-item, then use .first() and .last() to select the appropriate elements from this subset.

使用.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>

2 个解决方案

#1

更多相关文章

随机推荐