Question

我只是使用jQuery克隆克隆了一个div，如何重命名每个div元素id，克隆后的值，下面是我的代码，

 jQuery(function(){
     jQuery('#act').click(function(){
        jQuery("#test").clone(true, true).insertAfter("div#test:last");
     });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" class="test">
    <input type="hidden" name="product" value="<?php /* @escapeNotVerified */ echo $_product->getId() ?>" />
    <input type="hidden" name="selected_configurable_option" value="" />
    <input type="hidden" name="related_product" id="related-products-field" value="" />
    <label class="label" for=""</label>
        <div class="control">
            <select name="super_attribute" id="attribute" class="super-attribute-select">
                <option value="1">1</option>
            </select>
        </div>
        <label class="label" for="qty"><span>Qty</span></label>
        <div class="control">
           <input type="number" name="qty" id="qty1" maxlength="12" value="1" title="Qty" class="input-text qty" data-validate="">
        </div>
</div>
<div class="actions">
            <button type="submit"
                    title=""
                    class="action primary tocart"
                    id="act">
                <span>Add new item</span>
            </button>
        </div>

Answer 1

jQuery(function(){
  var len = 0;
     jQuery('#act').click(function(){
        jQuery("#test").clone(true, true).insertAfter("div#test:last");
       
       
    $('div#test:last').attr('id', 'test'+len);
       
       
       //set name for select box
    $('div#test'+len+' select').attr('name', 'super_attribute'+len);
       
       
       
       
len++;
     });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" class="test">
    <input type="hidden" name="product" value="<?php /* @escapeNotVerified */ echo $_product->getId() ?>" />
    <input type="hidden" name="selected_configurable_option" value="" />
    <input type="hidden" name="related_product" id="related-products-field" value="" />
    <label class="label" for=""</label>
        <div class="control">
            <select name="super_attribute" id="attribute" class="super-attribute-select">
                <option value="1">1</option>
            </select>
        </div>
        <label class="label" for="qty"><span>Qty</span></label>
        <div class="control">
           <input type="number" name="qty" id="qty1" maxlength="12" value="1" title="Qty" class="input-text qty" data-validate="">
        </div>
</div>
<div class="actions">
            <button type="submit"
                    title=""
                    class="action primary tocart"
                    id="act">
                <span>Add new item</span>
            </button>
        </div>

Answer 2

生成一些唯一的随机数，并使用.attr()方法

将其附加到您的ID

jQuery(function() {
     jQuery('#act').click(function() {
         var randomnumber = Math.ceil(Math.random() * 100)
         var el = jQuery("#test").clone(true, true).insertAfter("div#test:last").attr('id', 'test' + randomnumber);
       console.log('id = ' + el.attr('id'));
     });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" class="test">
    <input type="hidden" name="product" value="<?php /* @escapeNotVerified */ echo $_product->getId() ?>" />
    <input type="hidden" name="selected_configurable_option" value="" />
    <input type="hidden" name="related_product" id="related-products-field" value="" />
    <label class="label" for=""</label>
    <div class="control">
        <select name="super_attribute" id="attribute" class="super-attribute-select">
            <option value="1">1</option>
        </select>
    </div>
    <label class="label" for="qty"><span>Qty</span></label>
    <div class="control">
        <input type="number" name="qty" id="qty1" maxlength="12" value="1" title="Qty" class="input-text qty" data-validate="">
    </div>
</div>
<div class="actions">
    <button type="submit"
        title=""
        class="action primary tocart"
        id="act">
    <span>Add new item</span>
    </button>
</div>

Answer 3

如果您只想更改新元素，请应用map（从我的头顶开始，未经测试）;

jQuery(".test").clone(true, true).map(function(el, index) {
    return jQuery(el).attr("id", "test-" + index);
}).insertAfter("div.test:last");

此外，按ID（#test）选择多个元素可能不起作用，并且根据规范不允许在具有相同ID的单个页面上具有多个元素。这就是我在上面的代码中使用类选择器的原因。

如何动态地重命名每个jQuery克隆div的子元素id

3 个答案: