如何使用jquery获取数据属性的值答案

【问题标题】：How to get the value of data attribute using jquery如何使用jquery获取数据属性的值
【发布时间】：2015-04-25 08:59:09
【问题描述】：

我正在开发一个生成 html 页面的 node.js 应用程序。此 html 页面显示根据传递到此页面的数据构建的关联列表。列表的构建如下：

<ul class="notification-body" style="">
    //loop for all assocaite id's passed to this page
    <li class="testClass" data-associateid="<%= assocID %>">
         <span>
             <span class="subject">
                  <label class="btnClass label label-info">ClickMe!</label>
             </span>
         </span>
    </li>

生成的 html src 如下所示：

<ul class="notification-body" style="">
    <li class="testClass" data-associateid="AA01">
    <li class="testClass" data-associateid="AA02">
    <li class="testClass" data-associateid="AA03">

我正在尝试使用 Jquery 获取数据属性的值，我尝试了以下方法：

   $(".btnClass").click(function(){
        console.log($".testClass").attr("data-associateid"));
   });

但是每次我点击 btn 时都会输出 'AA01' 并且我没有在控制台中得到预期的输出： AA01 AA02 AA03

我也尝试了以下方法，但它给了我未定义：

   $(".btnClass").click(function(){
        console.log($(this).find(".testClass").attr("data-associateid"));
   });

【问题讨论】：

你的html代码中类.btnClass的元素在哪里？
我认为你需要调查一下：api.jquery.com/each
对不起，我已经更新了原帖中的代码
来自 jquery：.attr() 方法仅获取匹配集中第一个元素的属性值。要单独获取每个元素的值，请使用循环构造，例如 jQuery 的 .each() 或 .map() 方法。
更新了我的答案以符合您的要求

标签： javascript jquery node.js html dom

【解决方案1】：

您需要使用@987654321@。

我创建了一个jsFiddle 来展示它的工作原理。

我已经关闭了LI，因为 AR。

<ul class="notification-body" style="">
    <li class="testClass" data-associateid="AA01">1</li>
    <li class="testClass" data-associateid="AA02">2</li>
    <li class="testClass" data-associateid="AA03">3</li>
</ul>

这是 JavaScript：

$(document).ready(function() {
    $('.testClass').on('click', function(){
        alert( $(this).data('associateid') );
    });
});

只要您有一个以data- 开头的属性，您就可以将破折号后面的字符串作为数据容器引用。在这里，我在一个对象（LI）上调用jQuery.data() 并请求容器associateID 中的数据。

【讨论】：

【解决方案2】：

你目前在做什么：

$(".btnClass").click(function(){
     console.log($(".testClass").attr("data-associateid"));
});

将匹配.testClass 的第一个实例并打印data-associateid 属性。您似乎想要做的是遍历所有 .testClass 并打印它们的 data-associateid 值：

$(".btnClass").click(function(){
     $(".testClass").each(function() {
       console.log($(this).attr('data-associateid'));
     });
});

根据您更新的 HTML，您可以这样做：

$(".btnClass").click(function() {
    var id = $(this).parents('.testClass').attr('data-associateid');
    console.log(id);
});

这将搜索被点击的.btnClass 的父项，以查找类.testClass 的元素。

【讨论】：

提供了详细的解决方案，downvoter 应该注意解释 downV 的 ....+1 的操作以寻求帮助

【解决方案3】：

要获取该实例的数据，您只需遍历父 <li>。

在事件处理程序中，this 是发生事件的元素。使用closest()访问父<li>

$(".btnClass").on('click', function(){
        alert( $(this).closest('li').data('associateid') );
});

【讨论】：

【解决方案4】：

像这样为你的 li 元素分配不同的类：

<ul class="notification-body" style="">
    <li class="testClass1" data-associateid="AA01">test 1</li>
    <li class="testClass2" data-associateid="AA02">test 2</li>
    <li class="testClass3" data-associateid="AA03">test 2</li>
</ul>

请注意，我关闭了您的 li 和 ul 标记以获得有效的 HTML。

然后你可以选择一个有自己的类的元素：

console.log($(".testClass2").attr("data-associateid"));

我为你创建了一个 JSFiddle：

http://jsfiddle.net/8rLpbk5m/

【讨论】：

好的，我没有看到您要记录所有 ID。所以这是乔纳森克劳的答案。
分配唯一的类不是必需的或非常可扩展的。访问元素的多种其他方式

【解决方案5】：

我曾希望您只需找到即可做到这一点，但显然不是。您必须使用 each 循环遍历所有元素。

$(".btnClass").click(function(){
   $(".testClass").each(function() {
    console.log($(this).attr('data-associateid'));
  });
});

在此处查看：http://jsfiddle.net/rt677qp5/

【讨论】：

大家好，非常感谢您的回复。我已经更新了我在原始帖子中使用的 html 结构。所以基本上，当我点击标签“clickMe”时，我想 console.log() 该
对应的 assocaiteId 的值