get custom attribute value with jquery

Question

Trying to get attribute value with jQuery, then append it to element with class

<div id="data" class="democlass" data-author="Mr. Jhon Doe" data-cat="Technology" data-url="https://google.com"></div>

<p class="data-author"></p>
<p class="data-cat"></p>
<a href="#"></a>

$("#data").each(function() {
    var author = $(this).attr("data-author");
    var cat = $(this).attr("data-cat");
});

$( document ).ready(function() {
    $( ".data-author" ).append(author);
    $( ".data-cat" ).append(cat);
});

Am I doing something wrong in the code? here is the sample codepen

first why you are using each on id attribute ? and i didn't find more than one div to use each loop ? — Owais Aslam
– Owais Aslam, Commented Jan 22, 2017 at 14:28
I'm sorry for that... I found that code by searching on SO and googling. I'm self-taught in jQuery.. — bona
– bona, Commented Jan 22, 2017 at 14:31

Pranav C Balan · Accepted Answer · 2017-01-22 15:22:22Z

2

Variables are in different scope so it will be undefined, so do both actions within the document ready handler. Although each() is completely unnecessary here since id is unique(if there are multiple elements with same id then only the first element get selected).

$(document).ready(function() {
  // cache the element
  var $ele = $("#data");

  // append contents
  $( ".data-author" ).append($ele.attr("data-author"));
  $( ".data-cat" ).append($ele.attr("data-cat"));
});

UPDATE : You although use data() method to get custom data-* attribute value.

$( ".data-author" ).append($ele.data("author"));
$( ".data-cat" ).append($ele.data("cat"));

edited Jan 22, 2017 at 15:22

answered Jan 22, 2017 at 14:29

Pranav C Balan

115k25 gold badges173 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Pranav C Balan Over a year ago

@bona : glad to help :)

bona Over a year ago

can you please help me as my condition udpated in the question? I want to add url in the attribute, then use it as link target and link text.

Pranav C Balan Over a year ago

@bona : $(".data-cat").next().attr('href' , 'your value here')

bona Over a year ago

I mean to get the link from data-url attribute, then append it to a tag as link target and link text. btw thanks before

Pranav C Balan Over a year ago

@bona $(".data-cat").next().attr('href' , $ele.data('url'))

Owais Aslam · Accepted Answer · 2017-01-22 14:32:04Z

0

No need for each loop

$( document ).ready(function() { 
$( ".data-author" ).append($("#data").attr("data-author"));
$( ".data-cat" ).append($("#data").attr("data-cat"));
});

answered Jan 22, 2017 at 14:32

Owais Aslam

1,5891 gold badge18 silver badges41 bronze badges

Collectives™ on Stack Overflow

get custom attribute value with jquery

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related