如何使用相同的类名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中元素的标记之下(建议使用):

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

2. 或者,如果您不控制script标记的位置,请使用jQuery的ready回调,它将调用您在"DOM ready"上提供的函数(当元素存在时):

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