Question

我正在开发一个生成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＆amp;获取数据属性的值。我尝试了以下方法：

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

但每当我点击btn并且我没有在控制台中获得预期的输出时，这会输出＆＃39; AA01＆＃39; AA01 AA02 AA03

我也尝试了以下内容，但它给了我未定义的内容：

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

Answer 1

您目前正在做什么：

$(".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的元素。

Answer 2

您需要使用jQuery.data()。

我已创建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中询问数据。

Answer 3

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

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

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

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

Answer 5

我原本希望你能用一个发现来做，但显然不是。你必须使用每个循环遍历所有元素。

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

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

Answer 6

在这种情况下，使用.data（）更合乎逻辑。

$(".btnClass").click(function() {
  $(".testClass").each(function() {

    alert($(this).data("associateid"));
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="notification-body" style="">
  <li class="testClass" data-associateid="AA01"></li>
  <li class="testClass" data-associateid="AA02"></li>
  <li class="testClass" data-associateid="AA03"></li>
</ul>
<button class="btnClass"></button>

如何使用jquery获取data属性的值

6 个答案: