如何使用相同的类名jquery获取所有数据属性

Question

考虑以下data属性

<li data-tes='rwer-234;sdf-23;gfd-345' class='sel'>Some text</li>
<li data-tes='zxc-23;vcx-12' class='sel'>Some text1</li>

我试过

$('.sel').each(function(){
     console.log( $('.sel').data('tes') );
})

输出为undefined.

Answer 1

要看两件事：

首先，在你的each迭代器函数中，你正在进行$('.sel').data('tes')，它只会查看匹配.tes的第一个元素。该文件。如果要查看循环中迭代的当前元素的属性，请改为使用$(this).data('tes')：

$('.sel').each(function(){
    console.log($(this).data('tes'));
    // Here ----^^^^^^^
});

（或者，如果您只是需要获取该值，并且未使用data的各种其他功能，请使用attr：$(this).attr('data-tes')。）

第二件事是确保代码运行时存在这些元素。有两种方法可以做到：

1. 确保包含代码的script标记位于下面定义HTML中元素的标记（recommended）：

   ...content...
   <script>/* ...your code here... */</script>
   </body>
   </html>
   

2. 或者如果您不控制script标记的去向，请使用jQuery的ready回调，它将调用您在“DOM ready”上提供的函数（当元素为有）：

   $(document).ready(function(){
       /* ...your code here... */
   });
   

Answer 2

试试这个

 $('.sel').each(function(){
   console.log($(this).attr('data-tes'));
})

Answer 3

为了改善过滤，我想说

document.ready(function(){
   $('li .sel').each(function(){
      console.log($(this).attr('data-tes'));
   });
});

由于您在加载页面之前执行了脚本，因此您可能会得到一个未定义的内容。为了避免这种行为，您需要将代码包含在 document.ready（）中，以确保它在需要时执行。