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

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 获取数据属性的值，我尝试了以下操作：

   $(".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"));
   });

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 的父项以查找带有 class .testClass 的元素。

Answer 2

像这样为你的 li 元素分配不同的 classes:

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

然后你可以 select 一个有自己的元素 class:

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

我为你创建了一个 JSFiddle：

http://jsfiddle.net/8rLpbk5m/

Answer 3

我曾希望你能通过查找找到它，但显然不是。您必须使用 each 遍历所有元素。

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

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

Answer 4

在这种情况下使用 .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>

Answer 5

你需要使用<a href="http://api.jquery.com/jquery.data/" rel="noreferrer">jQuery.data()</a>.

我创建了一个 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 6

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

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

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

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

How to get the value of data attribute using jquery

javascript

jquery

node.js

html

dom