1

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

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

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

如何使用纯 javascript 做到这一点？我需要添加一个跨度类还是什么？

泰

4

4 回答 4

2

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

示例可以在这里找到： 点击这里

于 2012-07-29T11:57:24.323 回答
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。

于 2012-07-29T11:58:48.007 回答
1

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

于 2012-07-29T11:57:38.637 回答
1 
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');
于 2012-07-29T12:04:42.857 回答