Question

我有一个示例代码：

<ul id="classList">
<li class="visibleLayer" data-attr="1">Class 1</li>
<li class="" data-attr="2">Class 2</li>
<li class="visibleLayer" data-attr="3">Class 3</li>
<li class="" data-attr="4">Class 4</li>
</ul>
<a href="javascript:;" onclick="getList();">Get</a>

我的javascript：

function getList() {
   classAdder = document.getElementById('classList');
   ...
}

=＆GT;如何让所有 data-attr 拥有 visibleLayer

Answer 1

您需要$.fn.map，$.fn.get和一些基本选择器。 [attr-name[=attr-value]]是属性的CSS选择器，.className是类的CSS选择器。

我们将它们组合在一起并使用$.fn.map和$.fn.get来返回属性数组。

var attrs = $('[data-attr].visibleLayer').map(function(){
   return $(this).data("attr");
}).get();

Answer 2

您可以使用querySelectorAll()获取元素集合，然后使用for循环进行迭代以获取属性data-attr。

function getList(){
    var li = document.querySelectorAll('#classList li[class=visibleLayer]')
    for(var i = 0; i < li.length ; i++)
       console.log(li[i].getAttribute('data-attr'))

}

JSFiddle

Answer 3

您可以遍历ul并检查孩子是否具有所需的课程。

$('#classList').children('li').each(function() {
    if($(this).hasClass("visibleLayer")) {
        console.log($(this).data("attr"));
    }
})

DEMO

Answer 4

您可以使用filter过滤掉所需类别的li

 $('#classList li[class=visibleLayer]').filter(function () {
    alert($(this).attr('data-attr')); //gives 1 and 3
 });

Answer 5

function getList() {
if($('#classList .visibleLayer').length) {
    $('#classList .visibleLayer').each(function(){
        alert($(this).attr('data-attr'));
    });
}

}

演示：http://jsfiddle.net/vsok/7ptq3677/

Answer 6

＆＃13;

function getList(){
  var phrases = [];
  $('#classList').each(function(){      
    var phrase = '';
    $(this).find('.visibleLayer').each(function(){			   
      phrase = $(this).attr("data-attr");
      alert(phrase)
    });		
    phrases.push(phrase);
  });	
}

＆＃13;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title> Test Page </title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>   
 </head>
  <body>
    <ul id="classList">
      <li class="visibleLayer" data-attr="1">Class 1</li>
      <li class="" data-attr="2">Class 2</li>
      <li class="visibleLayer" data-attr="3">Class 3</li>
      <li class="" data-attr="4">Class 4</li>
    </ul>
    <a href="javascript:;" onclick="getList();">Get</a>

  </body>
</html>

＆＃13;

如何从列表中获取所有值li

6 个答案: