CODEWITHSUNDEEP
javascriptjquery
Ecoit
Ecoit

Reputation: 19

Get value from a dom tag

I do need help to get a tag value, i've tried several methods but they doens't work, sorry i'm quite new.

I have a code like this:

<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>

I have many divs like that with different data-dfid.

What I need it's to go trough all the data-dfid ocurrenciesinto the dom and get the value into a var.

I'm trying with document.getattribute but it doens't work:

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

I need that datafid var get the value of the data-dfid so first ocurrence soulg be datafid = 1111 second datafid = 2222 I've tried several methods but they doesn't work, i'm quite new with this. Also I have no ID into that tag so not able to use getelementsbyID

Thanks!

Upvotes: 0

Views: 365

Answers (5)

Shehbaz Badi
Shehbaz Badi

Reputation: 19

each loop in jQuery.

$( ".df-card-main" ).each(function() {
 var dfif_val = $(this).attr( "data-dfid" );
 console.log(dfif_val);
});
<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>

Upvotes: 0

Nithish
Nithish

Reputation: 5999

You can use dataset property on top the element through which you can access the custom attribute data-dfid like elem.dataset.dfid. For more info on data-* attributes and the usage 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>

Upvotes: 0

ikiK
ikiK

Reputation: 6532

You can not declare variable inside for each, last one will always overwrite the previous one as the loop will progress to its end.

You can NOT have datafid = 1111 and datafid = 2222 IN SAME TIME.

datafid is name of the variable and you can not have it twice.

You can declare a array and push each value into it. Later you can do what you want with that array.

Also there is no value in a elements. It is used just for inputs etc. just use .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>

Or use datadfid +=el.getAttribute('data-dfid') += that will push every new data attribute at end of variable.

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>

Upvotes: 0

MaximilianK
MaximilianK

Reputation: 63

This code will fulfill your requirements

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>

Upvotes: 0

imvain2
imvain2

Reputation: 15847

For something like this, ID would be bad idea anyway as you would have to consciously make them unique in the output.

You can use querySelectorAll to get all of the matching elements and a foreach to loop through them and getAttribute to get the string in 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>

Upvotes: 2

Related Questions