Question

我有很多不同索引的DIV-Containers。如何用jQuery显示索引大于或等于data-index =“3”的所有容器？应隐藏所有索引较小的容器。

实施例

<div class="container" data-index="0"></div>
<div class="container" data-index="1"></div>
<div class="container" data-index="2"></div>
<div class="container" data-index="3"></div>
<div class="container" data-index="4"></div>
<div class="container" data-index="5"></div>

Answer 1

使用jquery filter

尝试此操作

var divs = $('.container').filter(function() {
  return $(this).attr("data-index") >= 3;
})

Answer 2

使用.filter()和.data()

将匹配元素集合减少到与选择器匹配的元素或通过函数测试。

var target = $('.container').filter(function() {
  return $(this).data("index") >= 3;
});

Answer 3

$('div:gt(1)').css('color', 'red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" data-index="0">1</div>
<div class="container" data-index="1">2</div>
<div class="container" data-index="2">3</div>
<div class="container" data-index="3">4</div>
<div class="container" data-index="4">5</div>
<div class="container" data-index="5">6</div>

使用:gt()

描述：选择匹配集中索引大于索引的所有元素。

Answer 4

试试这个

$.each($('.container'),function(){
  var dataIndex = $(this).attr("data-index");
  If(parseInt(dataIndex) <= 2){
  $(this).hide();
  }
  else{
   $(this).show();
   }
})

Answer 5

我将使用.filter()：

使用相反的顺序

$(".container").filter(function() {
   return $(this).data("index") < 3 
}).css("display","none");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" data-index="0">0</div>
<div class="container" data-index="1">1</div>
<div class="container" data-index="2">2</div>
<div class="container" data-index="3">3</div>
<div class="container" data-index="4">4</div>
<div class="container" data-index="5">5</div>

jQuery显示数据索引更大或相等的所有容器

5 个答案: