CODEWITHSUNDEEP
jqueryeachcustom-data-attribute
kyleroo
kyleroo

Reputation: 57

jQuery how to use a parent's data-attribute to modify contents of child

I have this HTML

<div data-studentname="Joan Andrews" data-studentdegree="Math II" data-studentgpa="999">
    <div id="name"></div>
    <div id="degree"></div>
    <div id="gpa"></div>
</div>
<div data-studentname="Alex Simmons" data-studentdegree="Science VI" data-studentgpa="0">
    <div id="name"></div>
    <div id="degree"></div>
    <div id="gpa"></div>
</div>

What I wanted to do was to let the data attributes set the .text() values of the respective children, so it should look like this afterwards

<div class="student" data-studentname="Joan Andrews" data-studentdegree="Math II" data-studentgpa="999">
    <div id="name">Joan Andrews</div>
    <div id="degree">Math II</div>
    <div id="gpa">99</div>
</div>
<div class="student" data-studentname="Alex Simmons" data-studentdegree="Science VI" data-studentgpa="0">
    <div id="name">Alex Simmons</div>
    <div id="degree">Science VI</div>
    <div id="gpa">0</div>
</div>

I've setup a jQuery file having this

$('.student').each(function() {
  var student = $('.student');
  var studentname = student.data('studentname');
  var studentdegree = ability.data('studentdegree');
  var studentgpa = ability.data('studengpa')

  $('#name').text(studentname);
  $('#degree').text(studentdegree);
  $('#gpa').text(studentgpa);
});

This only edits the first set of divs under the first .student div and I don't know what to do now and I'm stuck in this.

I'm half-sure I'm using .each() wrong but this is because I'm unfamiliar with jQUery except for a few functions. I'd appreciate any amount of help.

Upvotes: 0

Views: 1869

Answers (1)

charlietfl
charlietfl

Reputation: 171679

ID's must be unique in a page so change to using classes. That is why you only get one set populated ... and with the last students data

You want to look inside each instance to populate instance specific elements which you do using find().

By matching the data attribute names to attributes of the children we can also simplify writing them all out separately

$('.student').each(function(){
   var $stu = $(this), // instance of student class
        data = $stu.data();// returns object with each data attribute as key
   $.each(data, function(key, value){
      // find within this student class instance
      $stu.find('.' + key).text(value)
   })
})
.student{ border:2px solid #ccc; padding:10px; margin:10px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="student" data-studentname="Joan Andrews" data-studentdegree="Math II" data-studentgpa="999">
    <div class="studentname"></div>
    <div class="studentdegree"></div>
    <div class="studentgpa"></div>
</div>
<div  class="student" data-studentname="Alex Simmons" data-studentdegree="Science VI" data-studentgpa="0">
    <div class="studentname"></div>
    <div class="studentdegree"></div>
    <div class="studentgpa"></div>
</div>

Upvotes: 2

Related Questions