Question

我现在正在使用jquery获取id的值，如下面的代码所示：

<ul class="trf noborder" data-id="6581">
</ul> 

var ID = $("ul.trf").data('id');

如何使用纯JavaScript进行此操作？我是否需要添加span类或其他内容？

泰

Answer 1

你可以使用 element.getAttribute('attribute_name') 在纯JavaScript中获取任何数据属性值的值。

示例可以在这里找到： Click Here

Answer 2

使用纯javascript有几种方法可以做到这一点取决于您的需求和您期望的性能。以下是使用ID的一种方式：

<ul class="trf noborder" data-id="6581" id="myDiv">
</ul> 

<script type="text/javascript">
    var id = document.getElementById("myDiv").getAttribute("data-id");
</script>

如果您想要定位没有任何ID的特定UL

，您可以尝试这样做

<ul class="trf noborder" data-id="6581">
</ul> 

<script type="text/javascript">
    var id = document.getElementsByTagName("ul")[0].getAttribute("data-id");
</script>

但您必须确保使用正确的索引，此处它将检索您网页上的第一个UL。你也可以将它包装在另一个容器中：

<div id="container">
    <ul class="trf noborder" data-id="6581"></ul> 
</div>

<script type="text/javascript">
     var container = document.getElementById("container");
     var id = container.getElementsByTagName("ul")[0].getAttribute("data-id");
</script>

它将使用该容器内的第一个UL。或者第三个，如果你这样做：

 var id = container.getElementsByTagName("ul")[2].getAttribute("data-id");

它基于数组索引，在这种情况下为2（0,1,2 =第三个元素）

如果您不想使用jQuery但仍然愿意使用库，请查看http://sizzlejs.com这是一个很棒的选择器引擎（实际上由jQuery使用）。有了Sizzle，你可以这样做：

var id = Sizzle("ul[data-id]")[0].getAttribute("data-id");

获取指定了data-id属性的页面上第一个UL的data-id。

Answer 3

您可以使用getAttribute函数读取属性。但是你应该自己收集元素，调用getElementById或getElementsByTagname函数。

Answer 4

getData: function(el, attr) {
  attr = 'data-' + attr;
  var result = (el.getAttribute && el.getAttribute(attr)) || null;

  if(!result) {
    var attrs = el.attributes;
    var length = attrs.length;

    for(var i = 0; i < length; i++)
      if(attrs[i].nodeName === attr)
        result = attrs[i].nodeValue;
  }

  return result;
}

var el = document.getElementsByClassName('trf')[0];
var id = getData(el, 'id');

修改将.data转换为javascript的jquery代码

4 个答案: