如何使用jquery获取li的内部属性的值？

Question

我在Java脚本中有以下代码，我必须从中获取<li>内部属性的值。

<li class="selected" data-val="1">

我已经使用

获取了标签

var a = document.getElementsByClassName('selected');

它为我提供了<li>整个标签。但我必须得到data-val属性的值（在<li>内）为1。   如何使用定义的变量a获取data-val的值。   请解释..

Answer 1

这里是一个集合对象，所以你需要使用索引获取元素引用然后使用.getAttribute（）来获取属性值（）

var a = document.getElementsByClassName('selected');
var val = a? a[0].getAttribute('data-val') : '';
//another option for modern browsers
// val = a[0].dataset.val

由于你有jQuery，你可以使用jQuery来选择元素，然后使用数据api，如

var val = $('.selected').data('val')

Answer 2

使用jQuery，您可以使用$(a).attr("data-val")。

如果没有jQuery，您可以使用a.getAttribute("data-val")

Answer 3

尝试这种方法

var dataValValue = $(".selected").attr("data-val");

它将从所有li中的 first li获取data-val属性.selected

Answer 4

有两种方法，使用jQuery和a中的第一个返回元素：

$.data(a[0],"val");
$(a[0]).data("val");

两者都是等价的。抱歉，它们并不相同，因为第一个是较低级别，does not process data-* attributes by itself。

由于.attr()属性在第二个属性的情况下自动处理，因此无需使用data-*。