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代码有三个功能：

一个为广播问题添加了一个重置按钮，另一个在点击重置按钮后取消选中这些问题，而第三个为重置按钮的data-question-id属性分配了相应的ID号。

问题

示例2 中的代码在data-question-id与其父级fieldset id的ID匹配的位置是正确的。

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

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

问题

如何适当地迭代每个重置按钮parent，获取其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;
});

Answer 2

$(".reset-button").each(function() {
    var rid = $(this).parent().prop('id'); // get the parent ID
    $(this).data('question-id',rid); // set the data-question-id of the reset button 
});

迭代父元素

问题

问题

2 个答案: