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

我有一个示例代码：

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

---

=>如何获取所有数据属性拥有类是可见层

您需要

$.fn.map

，

$.fn.get

和一些基本选择器

[attr name[=attr value]

是属性的CSS选择器，而

是类的CSS选择器

我们将两者结合使用，并使用
$.fn.map
和
$.fn.get
返回属性数组

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

您可以使用
querySelectorAll（）
获取元素集合，然后使用
for
循环对其进行迭代，以获取属性
数据属性

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

}

函数getList（）{
var li=document.querySelectorAll（“#classList li[class=visibleLayer]”）
对于（变量i=0；i

您可以通过
ul
循环检查孩子们是否有所需的课程

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

您可以使用
filter
筛选出具有所需类的li

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

}

演示：

函数getList（）{
var短语=[]；
$（'#classList'）。每个（函数（）{
var短语=“”；
$（this）.find（'.visibleLayer'）.each（function（）{
短语=$（this.attr（“数据attr”）；
警报（短语）
});		
短语。推（短语）；
});	
}

测试页

第1类
第2类
第3类
第4类

jQuery、javascript或两者都可以吗？
 $('#classList li[class=visibleLayer]').filter(function () {
    alert($(this).attr('data-attr')); //gives 1 and 3
 });

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