2

我有一些看起来像这样的 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-idid 与其父对象的 id 匹配fieldset id。

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

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

问题

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

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

4

2 回答 2

1

遍历.reset-button元素，并将每个元素设置data-question-id为父 id ：

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

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

你也可以这样做：

$(".reset-button").attr('data-question-id', function(i, val) {
    return this.parentNode.id || val;
});
于 2013-04-08T20:30:25.663 回答
1 
$(".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 
});
于 2013-04-08T20:31:33.413 回答