Question

我有以下html

<ul>
    <li data-index="-2"></li>
    <li data-index="-1"></li>
    <li data-index="0"></li>
    <li data-index="1"></li>
    <li data-index="2"></li>
</ul>

如何获取数据索引不在[0,1]

范围内的所有列表项

Answer 1

您可以使用filter()完成此操作。

检查此示例：

＆＃13;

$(function() {
  var collection = [];
  collection = $("ul>li").filter(function(i, el) {
    var index = $(el).data("index");
    return index != 0 && index != 1;
  });
  console.log(collection);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<ul>
  <li data-index="-2">1</li>
  <li data-index="-1">2</li>
  <li data-index="0">3</li>
  <li data-index="1">4</li>
  <li data-index="2">5</li>
</ul>

＆＃13;

Answer 2

您可以尝试这样：

   <ul id="list-element">
        <li data-index="-2">test</li>
        <li data-index="-1">test1</li>
        <li data-index="0">test2</li>
        <li data-index="1">test3</li>
        <li data-index="2">test4</li>
    </ul>

    $(document).ready(function() {
            var listelements = $('#list-element').children('li');
            var result = [];
            $.each(listelements,function(key,value){
                    var temp = value.getAttribute('data-index');
                    if(temp>1 || temp<0){
                        result.push(value);
                    }
                   console.log(result);
            })

    });

    </script>

Answer 3

尝试以下JS -

＆＃13;

$(document).ready(function(){
var arr = new Array();
$('ul>li').each(function(){
  var dataIndex= parseInt($(this).attr('data-index'));
  if(dataIndex>1 || dataIndex<0)  { 
    arr.push($(this));
    }
});
alert(arr.length);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li data-index="-2"></li>
    <li data-index="-1"></li>
    <li data-index="0"></li>
    <li data-index="1"></li>
    <li data-index="2"></li>
</ul>

＆＃13;

Answer 4

你的HTML

<ul>
    <li data-index="-2">minus two</li>
    <li data-index="-1">minus one</li>
    <li data-index="0">zero</li>
    <li data-index="1">one</li>
    <li data-index="2">two</li>
</ul>

jquery的

$(document).ready(function() {
    $('li').filter(function() {
       return $(this).data('index') > 1 || $(this).data('index') < 0;
    }).addClass("new");

});

在这里，我选择并为li标签添加了一个新类，以满足您的条件。

参考this小提琴

获取具有满足条件的data属性的元素

4 个答案: