Question

我确实需要帮助来获取标签值，我已经尝试了几种方法，但是它们不起作用，对不起，我还很新。

我有这样的代码：

<div class="df-card">
<a class="df-card-main" data-dfid="1111">
</a>
</div>
<div class="df-card">
<a class="df-card-main" data-dfid="2222">
</a>
</div>

我有很多这样的div，它们具有不同的data-dfid。

我需要做的是将所有数据记录的数据都放入dom并将值存储到var中。

我正在尝试使用document.getattribute，但是它不起作用：

for (i=0;i<whatever;i++) {
var datadfid = document.getAttribute('data-dfid').value;
{

我需要datafid var来获取data-dfid的值，因此第一个出现的时间应为datafid = 1111，第二个datafid = 2222 我尝试了几种方法，但是它们不起作用，对此我还是很陌生。另外，我在该标签中没有ID，因此无法使用getelementsbyID

谢谢！

Answer 1

对于这样的事情，ID绝对不是一个好主意，因为您必须有意识地使它们在输出中唯一。

您可以使用querySelectorAll获取所有匹配的元素，并使用foreach遍历它们，并使用getAttribute获取data-dfid中的字符串。

var links = document.querySelectorAll(".df-card-main");

links.forEach(function(e){
  console.log(e.getAttribute("data-dfid"));
});

<div class="df-card">
<a class="df-card-main" data-dfid="1111">
</a>
</div>
<div class="df-card">
<a class="df-card-main" data-dfid="2222">
</a>
</div>

Answer 2

此代码将满足您的要求

const cards = document.querySelectorAll(".df-card-main")

for(const card of cards){
    console.log(card.getAttribute("data-dfid"))
}

<div class="df-card">
<a class="df-card-main" data-dfid="1111">
</a>
</div>
<div class="df-card">
<a class="df-card-main" data-dfid="2222">
</a>
</div>

Answer 3

您不能为每个变量声明内部变量，最后一个变量将始终覆盖前一个变量，因为循环将继续进行到最后。

您可以不同时拥有datafid = 1111和datafid = 2222。

datafid 是变量的名称，不能重复两次。

您可以声明一个数组并将每个值压入其中。稍后，您可以使用该数组执行所需的操作。

元素中也没有值。它仅用于inputs等。只需使用.getAttribute('data-dfid')

var datadfid = [];

[...document.querySelectorAll('.df-card-main')].forEach(el => { 
datadfid.push(el.getAttribute('data-dfid')); 
  })

console.log(datadfid);

<div class="df-card">
<a class="df-card-main" data-dfid="1111">
</a>
</div>
<div class="df-card">
<a class="df-card-main" data-dfid="2222">
</a>
</div>

或使用datadfid +=el.getAttribute('data-dfid') +=将每个新的数据属性推入变量的末尾。

var datadfid = "";

[...document.querySelectorAll('.df-card-main')].forEach(el => { 
datadfid += el.getAttribute('data-dfid'); 
  })

console.log(datadfid);

<div class="df-card">
<a class="df-card-main" data-dfid="1111">
</a>
</div>
<div class="df-card">
<a class="df-card-main" data-dfid="2222">
</a>
</div>

Answer 4

您可以在元素顶部使用dataset属性，通过该属性可以访问自定义属性data-dfid，例如elem.dataset.dfid。有关data-*属性和用法refer here

的更多信息

const dfidValues = [];

const cardMains = document.querySelectorAll(".df-card-main");

cardMains.forEach(cardMain => {
  //For each iteration the value will be corresponding to that particular element with `data-dfid` attribute
  //i.e., first it'll be 1111, then 2222
  console.log(cardMain.dataset.dfid);

  //If you want to store the values for later use, you can do the following
  dfidValues.push(cardMain.dataset.dfid);
})

//Use dfidValues here once after fetching all the values from dom
console.log(dfidValues);

<div class="df-card">
  <a class="df-card-main" data-dfid="1111">
  </a>
</div>
<div class="df-card">
  <a class="df-card-main" data-dfid="2222">
  </a>
</div>

Answer 5

each loop在jQuery中。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="df-card">
<a class="df-card-main" data-dfid="1111">
</a>
</div>
<div class="df-card">
<a class="df-card-main" data-dfid="2222">
</a>
</div>

{{1}}

从dom标签获得价值

5 个答案: