jQuery 如何使用 parent 的 data-attribute 修改 child 的内容

Question

我有这个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>

我想做的是让数据属性设置各自children的.text()值，所以之后应该是这样的

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

我已经设置了一个 jQuery 文件，里面有这个

$('.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);
});

这只会编辑第一个 .student div 下的第一组 div，我现在不知道该怎么办，我被困在了这里。

我是 half-sure 我使用 .each() 是错误的，但这是因为我不熟悉 jQUery 除了一些功能。如果能提供任何帮助，我将不胜感激。

Answer 1

ID 在页面中必须是唯一的，因此改为使用类。这就是为什么你只得到一组填充......和最后一个学生数据

您想查看每个实例以填充您使用 find().

执行的实例特定元素

通过将数据属性名称与 children 的属性相匹配，我们还可以简化将它们全部单独写出来的过程

$('.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>

jQuery 如何使用 parent 的 data-attribute 修改 child 的内容

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

each

jquery

custom-data-attribute