在 JQuery 中选择自定义数据属性答案

【问题标题】：Selecting custom data attributes in JQuery在 JQuery 中选择自定义数据属性
【发布时间】：2015-09-29 18:02:28
【问题描述】：

我这里有一个清单

<ul id="demo2" data-name="demo2">
    <li data-value="here">here</li>
    <li data-value="are">are</li>
    <li data-value="some...">some</li>
    <!-- notice that this tag is setting a different value :) -->
    <li data-value="initial">initial</li>
    <li data-value="tags">tags</li>
</ul>

每个 li 项目都有一个自定义数据属性。在 JQuery 上，如何获取每个具有 data-value 属性的 li 元素的所有值？我想得到他们的价值。

但我的这段代码似乎不起作用

        $('#view-tags').click(function(){
            $('li[data-value]').each(function(){
                alert($(this).data("value"));
            })
    });

jsfiddle上的完整代码：http://jsfiddle.net/Zn3JA/

【问题讨论】：

我没有看到那个来。我正在使用一个名为 tagit 的 JQuery 插件
好吧，正确地包含了来自 github 的 tagit 库，并修复了你刚刚破坏了 the author 的演示这一事实，我现在没有任何错误。你到底是什么问题？？ jsfiddle.net/puLeR/2
@Jamiec 我无法获取每个 li 的“数据值”的值。
好吧，正如我现在两次演示的那样，它工作正常。一次是clean fiddle，一次是fixing your fiddle。不知道我还能为此做出多少贡献，抱歉！

标签： javascript jquery html custom-data-attribute

【解决方案1】：

你很接近。您可以使用 jQuery 的.data() 方法来读取以data- 开头的属性。所以在你的情况下.data("value")，因为你的属性是data-value="some"。

应该这样做：

$('li[data-value]').each(function(){
     alert($(this).data("value"));
});

这也是一个工作小提琴： http://jsfiddle.net/nuphP/

【讨论】：

它仍然无法正常工作我已经更新了我的代码。它只会给我一个未定义的
@user962206 它应该可以工作！我在我的答案中添加了一个小提琴，它显示了正在运行的代码。您是否收到任何 JS 错误？你在引用 jQuery 库吗？
@user962206 我通过删除一些无法调用的 JS 代码让您的代码在 this fiddle 中工作，因为例如小提琴缺少 tagit.js 文件。所以这段代码工作得很好。问题出在代码的其他地方。您可能还有其他一些 JS 错误会中断执行。
当我将警报放在 document.ready 函数的第一行时，它可以工作，但是当我将它放在底部的某个地方时，它不再工作了。这很奇怪
@user962206 这可能是因为中间的一些代码抛出了一个错误，从而停止了执行。那里的 jQuery 代码放在最后时永远不会运行。找到那个错误，你的代码应该可以正常工作。例如，您确定 .tagit() 可以按预期工作吗？

【解决方案2】：

$(this).attr('data-value')

应该也可以。

【讨论】：

请注意，这略有不同：它将在元素中创建一个真实的属性。如果您使用.data()，该值将存储在 DOM 节点中，但不会像 HTML 属性那样表现；这可能是也可能不是您想要的；但需要注意的是（例如，CSS 可以通过.attr() 设置的真实属性进行选择）。

【解决方案3】：

你可以在你的情况下使用：

 jQuery(this).data("value");

为了检索值。

【讨论】：

它仍然无法正常工作我已经更新了我的代码请重新检查我的问题

【解决方案4】：

$(this) 指的是当前的li 元素，因此您会收到该元素的警报。

您可以尝试其他人的建议，即$(this).data("value")

【讨论】：

你用的是什么版本的jquery？
好的.. id为view-tags的元素类型是什么？

【解决方案5】：

   $('#view-tags').click(function(){
        $('li[data-value]').each(function(){
        var value = $(this).attr('data-value');
            alert(value);
        })
}); // this work normally

获取属性值并存储变量值

var value = $ (this) .attr ('date value');

在这个警告之后变量值

alert (value);

【讨论】：

请在您的答案中添加一点解释。
对您的代码进行一些解释，您的答案如何帮助或解决问题？