javascript - 迭代父元素

Question

我有一些看起来像这样的 HTML(示例 1):

<tr id="q_19030" class="q_grid " style="background: none repeat scroll 0% 0% yellow;">
  <a class="reset-button" data-question-id="g_1363"></a>
</tr>

我还有一些如下所示的 HTML(示例 2):

<fieldset id="q_19044" class="q_default " style="background: none repeat scroll 0% 0% yellow;">
  <a class="reset-button" data-question-id="q_19044"></a>
</fieldset>

我有一些像这样的 jQuery 代码:

$(document).ready(function() {
  $('.surveyor_radio').parent().parent().append('<a class="reset-button">Reset</a>');

  $('.reset-button').click(function () {
      $('#'+$(this).data('question-id') + ' input[type="radio"]:checked').prop('checked', false).trigger('change');
  });

  $('fieldset').each(function () {
      var qid = $(this).attr('id');
      $('.reset-button', $(this)).attr('data-question-id', qid);
  });
});

jQuery 代码具有三个功能:

一个向单选问题添加重置按钮，另一个在单击重置按钮后取消选中这些问题，而第三个将适当的 ID 号分配给重置按钮的 data-question-id 属性.

问题

示例 2 中的代码是正确的，其中 data-question-id 与其父级 ID(即 fieldset id)匹配。

但是，字段集并不总是包含正确的data-question-id，如示例 1 中所示，其中它是特定行的 ID。

始终可以信赖的一个假设是，正确的 id 始终是重置按钮的父级。

问题

如何正确迭代每个重置按钮父级，获取其 id，然后设置重置按钮的 data-question-id。

我最好的尝试是类似 $(".reset-button").parent().each().attr("id");

Answer 1

迭代.reset-button元素，并将每个data-question-id设置为父ID:

$(".reset-button").each(function() {
    $(this).data('question-id', $(this).parent().attr('id'));
});

请注意，在 DOM 检查器中查看数据属性时，这不会更改数据属性，因为 jQuery 在内部存储此属性，但会更改稍后使用 data(); 检索的值

你也可以这样做:

$(".reset-button").attr('data-question-id', function(i, val) {
    return this.parentNode.id || val;
});