Question

我尝试通过点击div元素来克隆a元素。当克隆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编码的新手。这是我的代码：

＆＃13;

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();
}

＆＃13;

<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>

＆＃13;

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

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));

<强>演示：

＆＃13;

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();
}

＆＃13;

<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>

＆＃13;

Answer 2

您要做的是首先获取并循环elementRow的孩子然后循环遍历该孩子的每个属性：

  // get and loop through each children
  $(elementRow).children().each(function () {
     var child = $(this)[0];

     // loop through each attribute
     for (var i = 0; i < child.attributes.length; i++)
     {
        var attributeVal = child.attributes[i].value;

        // check if attribute value contains XX
        if (attributeVal.indexOf("XX") != -1)
        {
            // replace it
            child.attributes[i].value = attributeVal.replace(/XX/g, elementCounter)
        }
     }
  });

$(this)[0]是一种获取original javascript HTML object reference而非获得jQuery object的方法。

.attributes是JS HTML Object的属性，在jQuery HTML object中不存在。

working fiddle based on your example

希望有所帮助。

使用jQuery

2 个答案: