javascript - 用 jQuery 将所有 XX 属性替换为数字 ID

Question

我正在尝试通过单击 a 元素来克隆 div 元素。当 div 被克隆时，所有 XX 属性都会更改为它的数字 ID。例如:

• for="gr_name_XX" 到 for="gr_name_1"
• name="grfield[XX][name]" 到 name="grfield[1][name]"
• id="gr_name_XX" 到 id="gr_name_1"

我正在尝试这样做，但只有 div 元素的 ID 属性执行此功能并更改为数字 ID。抱歉，我是 javascript 和 jQuery 编码的新手。这是我的代码:

var elementCounter = 0;

jQuery(document).ready(function() {

  jQuery("#add-new-game").click(function() {
    var elementRow = jQuery("#placeholder-item").clone();
    var newId = "gr-item-" + elementCounter;

    elementRow.attr("id", newId);
    elementRow.show();

    // Where I have problem!!
    elementRow.each(function() {
      elementRow.html().replace(/XX/g, elementCounter);
    });

    var removeLink = jQuery("a", elementRow).click(function() {
      removeElement(elementRow);
      return false;
    });

    elementCounter++;
    jQuery("input[name=element-max-id]").val(elementCounter);

    jQuery(".add-and-remove-items").append(elementRow);

    return false;
  });

});

function removeElement(element) {
  jQuery(element).remove();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="sortable-items add-and-remove-items settings-items gr-items"></div>

<input type="hidden" name="element-max-id" />
<a href="#" id="add-new-game">Add new</a>

<div class="sortable-item add-and-remove-item settings-item gr-item front-page-element" id="placeholder-item" style="display: none;">
  <label for="gr_name_XX" style="width: 90px; display: inline-block;">Name: </label>
  <input type="text" name="grfield[XX][name]" class="regular-text" id="gr_name_XX" value="" />
  <label for="gr_genre_XX" style="width: 90px; display: inline-block;">Genre: </label>
  <input type="text" name="grfield[XX][genre]" class="regular-text" id="gr_genre_XX" value="" />
  <br>
  <label for="gr_backg_XX" style="width: 90px; display: inline-block;">Background: </label>
  <input type="text" name="grfield[XX][backg]" class="regular-text" id="gr_backg_XX" value="" />
  <label for="gr_date_XX" style="width: 90px; display: inline-block;">Date: </label>
  <input type="text" name="grfield[XX][date]" class="regular-text" id="gr_date_XX" value="" />
  <label for="gr_nc_XX"><input type="checkbox" name="grfield[XX][nc]" id="gr_nc_XX" value="1" /> String date</label>
  <a href="#">Remove</a><br>
</div>

我做错了什么？谢谢...

Answer 1

您不需要使用 each 并且 .html() 只返回标记内容。要更新，您需要执行 .html(YOUR-UPDATE-CODE),

改变，

// Where I have problem!!
elementRow.each(function() {
  elementRow.html().replace(/XX/g, elementCounter);
});

到

elementRow.html(elementRow.html().replace(/XX/g, elementCounter));

演示:

var elementCounter = 0;

jQuery(document).ready(function() {

  jQuery("#add-new-game").click(function() {
    var elementRow = jQuery("#placeholder-item").clone();
    var newId = "gr-item-" + elementCounter;

    elementRow.attr("id", newId);
    elementRow.show();

    elementRow.html(elementRow.html().replace(/XX/g, elementCounter));

    var removeLink = jQuery("a", elementRow).click(function() {
      removeElement(elementRow);
      return false;
    });

    elementCounter++;
    jQuery("input[name=element-max-id]").val(elementCounter);

    jQuery(".add-and-remove-items").append(elementRow);

    return false;
  });

});

function removeElement(element) {
  jQuery(element).remove();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="sortable-items add-and-remove-items settings-items gr-items"></div>

<input type="hidden" name="element-max-id" />
<a href="#" id="add-new-game">Add new</a>

<div class="sortable-item add-and-remove-item settings-item gr-item front-page-element" id="placeholder-item" style="display: none;">
  <label for="gr_name_XX" style="width: 90px; display: inline-block;">Name: </label>
  <input type="text" name="grfield[XX][name]" class="regular-text" id="gr_name_XX" value="" />
  <label for="gr_genre_XX" style="width: 90px; display: inline-block;">Genre: </label>
  <input type="text" name="grfield[XX][genre]" class="regular-text" id="gr_genre_XX" value="" />
  <br>
  <label for="gr_backg_XX" style="width: 90px; display: inline-block;">Background: </label>
  <input type="text" name="grfield[XX][backg]" class="regular-text" id="gr_backg_XX" value="" />
  <label for="gr_date_XX" style="width: 90px; display: inline-block;">Date: </label>
  <input type="text" name="grfield[XX][date]" class="regular-text" id="gr_date_XX" value="" />
  <label for="gr_nc_XX"><input type="checkbox" name="grfield[XX][nc]" id="gr_nc_XX" value="1" /> String date</label>
  <a href="#">Remove</a><br>
</div>