jQuery如何使用父的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>

我想要做的是让数据属性设置各个孩子的.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);
});

这只编辑了第一组qsxswpoi .student下的第一组div，我现在不知道该怎么办，我陷入了困境。

我确定我正在使用.each（）错误，但这是因为除了一些函数我不熟悉jquery。我会感激任何帮助。

Answer 1

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

您希望查看每个实例内部以填充使用div执行的实例特定元素。

通过将数据属性名称与子项的属性进行匹配，我们还可以简化它们的全部内容

find()

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