jQuery 克隆表单增加 name、class、id、data-id ..etc 的所有属性

Question

我们的表单包含多个字段，我们需要通过 jQuery 来完成

• 当克隆字段需要增加它的名称、类、ID、数据ID和标签时。

如何增加这样的ID

block-post-order-1-select

或者这样的名字

name="xform_demo[block-post-order-1]

您可以查看此表单代码 在代码笔http://codepen.io/earngate/pen/NxPOZz/

HTML

    <table id="section-table-section-start1" data-id="section-start1" class="form-table form-table-section no-border form-table-section-indented">
    <tr>
    <th scope="row">
    <div class="xform_field_th">
    Block</div>
    </th>
    <td>
    <fieldset id="xform_demo-switch-fold-1" class=" xform-container-switch" data-id="switch-fold-1" data-type="switch">
    <div class="switch-options">
    <label class="cb-enable selected" data-id="switch-fold-1"><span>On</span></label>
    <label class="cb-disable" data-id="switch-fold-1"><span>Off</span></label>
    <input class="checkbox checkbox-input" id="switch-fold-1" name="xform_demo[switch-fold-1]" value="1" type="hidden"></div>
    </fieldset></td>
    </tr>
    <tr class="fold">
    <th scope="row">
    <div class="xform_field_th">
    Text logo</div>
    </th>
    <td>
    <fieldset id="xform_demo-block-cat-title-1" class="xform-container-text " data-id="block-cat-title-1" data-type="text">
    <input id="block-cat-title-1" name="xform_demo[block-cat-title-1]" value class="regular-text " type="text" size="20"></fieldset></td>
    </tr>
    <tr class="fold">
    <th scope="row">
    <div class="xform_field_th">
    </div>
    </th>
    <td>
    <fieldset id="xform_demo-block-post-order-1" class=" xform-container-select" data-id="block-post-order-1" data-type="select">
    <div style="width: 40%;" id="s2id_block-post-order-1-select" class="select2-container xform-select-item select2-allowclear">
    <a href="javascript:void(0)" class="select2-choice" tabindex="-1">
    <span id="select2-chosen-2" class="select2-chosen">first-choise</span><abbr class="select2-search-choice-close"></abbr>
    <span class="select2-arrow" role="presentation"><b role="presentation">
    </b></span></a><label for="s2id_autogen2" class="select2-offscreen">
    </label>
    <input id="s2id_autogen2" aria-labelledby="select2-chosen-2" class="select2-focusser select2-offscreen" aria-haspopup="true" role="button" type="text" size="20">
    <div class="select2-drop select2-display-none select2-with-searchbox">
    <div class="select2-search">
    <label for="s2id_autogen2_search" class="select2-offscreen"></label>
    <input placeholder id="s2id_autogen2_search" aria-owns="select2-results-2" spellcheck="false" class="select2-input"  type="text" size="20">
    </div>
    <ul id="select2-results-2" class="select2-results" role="listbox">
    </ul>
    </div>
    </div>
    <select title tabindex="-1" id="block-post-order-1-select" name="xform_demo[block-post-order-1]" class="xform-select-item " style="width: 40%; display: none;" rows="6">
    <option></option>
    <option value="Desc" selected="selected">Lates</option>
    <option value="rand">Random Posts</option>
    </select></fieldset></td>
    </tr>
    <tr style="border-bottom: medium none;" class="compiler fold">
    <th scope="row">
    <div class="xform_field_th">
    Block Style</div>
    </th>
    <td>
    <fieldset id="xform_demo-block_type_1" class=" xform-container-image_select" data-id="block_type_1" data-type="image_select">
    <div class="xform-table-container">
    <ul class="xform-image-select">
    <li class="xform-image-select">
    <label class=" xform-image-select-selected xform-image-select block_type_1_1" for="block_type_1_1">
    <input class=" compiler noUpdate " id="block_type_1_1" name="xform_demo[block_type_1]" value="node" checked="checked" type="radio"><img src="1-3.png" alt="node" class style=" width: 100%; "></label></li>
    <li class="xform-image-select">
    <label class=" xform-image-select block_type_1_2" for="block_type_1_2">
    <input class=" compiler noUpdate  noUpdate " id="block_type_1_2" name="xform_demo[block_type_1]" value="nodey" type="radio"><img src="1-4.png" alt="nodey" class style=" width: 100%; "></label></li>
    </ul>
    </div>
    </fieldset></td>
    </tr>
    <tr style="display: none;" class="xform-section-indent-start">
    <th scope="row"></th>
    <td></td>
    </tr>
    </table>

jQuery

    $(document).ready(function () {
    $('table#section-table-section-start1').after('<input class="add_btn" id="add_btn" type="button" value="Add New">');

    $(".add_btn").click(function(e) {
    var avails = $(this).prevAll();
    var cnt = avails.length + 1;

    $('#section-table-section-start1:last').clone().insertAfter("#section-table-section-start1:last").append( $('<input class="del_btn"  type="button" value="Delete this">') );

    $("input.del_btn").css({"float":"right","background-color":"#c00","color":"#fff"});

    e.preventDefault();
    });

    $("body").on('click',".del_btn", function() {
    $(this).parent().remove();
    });

    });

你能帮忙吗

Answer 1

所以问题似乎是“如何增加多个节点的多个属性中的数量”。 我将缩小范围以增加多个属性中的 last 整数，以保持简单。

你可以创建一个简单的函数来增加一个节点的一个属性的数量，然后对你需要的元素和属性重复它：

/* Increase the last number for an attribute of an jQuery element, if possible */
function inc ( node, property ) { // .prop does not work with data-id so must use .attr
   var number = node.attr( property ) ? node.attr( property ).match( /\d+(?=\D*$)/ ) : null;
   if ( number === null ) return; // Abort if has no attribute or no number in it
   node.attr( property, node.attr( property ).replace( /\d+(?=\D*$)/, +number[0]+1 ) );
}

var last = $('[id^=section-table-section-start]:last'), cloned = last.clone();

// For each element with any attribute we need, including the cloned table
cloned.find( '[name],[class],[id],[data-id],[for]' ).add( cloned ).each( function(){
   var me = $( this );
   // Loop and increment each property
   $.each( [ 'name', 'className', 'id', 'data-id', 'for' ], function( i, property ) { 
      inc( me, property );
   });
});

有几种方法可以进行循环。

• 这里我们抓取所有元素并在每个元素上循环每个属性。
• 如果您的属性较少，您可以为每个属性手动调用inc 而不是$.each。
• 或者，您可以先循环每个属性并找到元素，这样您可以创建更多 jQ 对象但检查的属性更少。

您可能还注意到我更改了您的克隆代码，因为使用自动增加的 id 您不能再按 id 选择最后一个表。

这里是完整的代码：

$( function () {
   function inc ( element, property ) {
      var number = element.attr( property ) ? element.attr( property ).match( /\d+(?=\D*$)/ ) : null;
      if ( number === null ) return;
      element.attr( property, element.attr( property ).replace( /\d+(?=\D*$)/, +number[0]+1 ) );
   }

   $('table#section-table-section-start1').after('<input class="add_btn" id="add_btn" type="button" value="Add New">');

   $(".add_btn").click(function(e) {
      var last = $('[id^=section-table-section-start]:last'), cloned = last.clone();
      cloned.find( '[name],[class],[id],[data-id],[for]' ).add( cloned ).each( function(){
         var me = $( this );
         $.each( [ 'name', 'className', 'id', 'data-id', 'for' ], function( i, property ) {
            inc( me, property );
         });
      });
      cloned.insertAfter( last );
      if ( ! cloned.find( '.del_btn' ).length ) {
         cloned.append( 
            $( '<input class="del_btn"  type="button" value="Delete this">' )
               .css({"float":"right","background-color":"#c00","color":"#fff"})
         );
      }
      e.preventDefault();
   });

   $("body").on('click',".del_btn", function() { $(this).parent().remove(); });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<table id="section-table-section-start1" data-id="section-start1" class="form-table form-table-section no-border form-table-section-indented">
   <tr>
      <th scope="row">
         <div class="xform_field_th">
            Block</div>
      </th>
      <td>
         <fieldset id="xform_demo-switch-fold-1" class=" xform-container-switch" data-id="switch-fold-1" data-type="switch">
            <div class="switch-options">
               <label class="cb-enable selected" data-id="switch-fold-1">
                  <span>On</span>
               </label>
               <label class="cb-disable" data-id="switch-fold-1">
                  <span>Off</span>
               </label>
               <input class="checkbox checkbox-input" id="switch-fold-1" name="xform_demo[switch-fold-1]" value="1" type="hidden"/>
            </div>
         </fieldset>
      </td>
   </tr>
   <tr class="fold">
      <th scope="row">
         <div class="xform_field_th">
            Text logo</div>
      </th>
      <td>
         <fieldset id="xform_demo-block-cat-title-1" class="xform-container-text " data-id="block-cat-title-1" data-type="text">
            <input id="block-cat-title-1" name="xform_demo[block-cat-title-1]" value class="regular-text " type="text" size="20"/>
         </fieldset>
      </td>
   </tr>
   <tr class="fold">
      <th scope="row">
         <div class="xform_field_th">
         </div>
      </th>
      <td>
         <fieldset id="xform_demo-block-post-order-1" class=" xform-container-select" data-id="block-post-order-1" data-type="select">
            <div style="width: 40%;" id="s2id_block-post-order-1-select" class="select2-container xform-select-item select2-allowclear">
               <a href="javascript:void(0)" class="select2-choice" tabindex="-1">
                  <span id="select2-chosen-2" class="select2-chosen">first-choise</span>
                  <abbr class="select2-search-choice-close"/>
                  <span class="select2-arrow" role="presentation">
                     <b role="presentation">
                     </b>
                  </span>
               </a>
               <label for="s2id_autogen2" class="select2-offscreen">
               </label>
               <input id="s2id_autogen2" aria-labelledby="select2-chosen-2" class="select2-focusser select2-offscreen" aria-haspopup="true" role="button" type="text" size="20"/>
               <div class="select2-drop select2-display-none select2-with-searchbox">
                  <div class="select2-search">
                     <label for="s2id_autogen2_search" class="select2-offscreen"/>
                     <input placeholder id="s2id_autogen2_search" aria-owns="select2-results-2" spellcheck="false" class="select2-input"  type="text" size="20"/>
                  </div>
                  <ul id="select2-results-2" class="select2-results" role="listbox">
                  </ul>
               </div>
            </div>
            <select title tabindex="-1" id="block-post-order-1-select" name="xform_demo[block-post-order-1]" class="xform-select-item " style="width: 40%; display: none;" rows="6">
               <option/>
               <option value="Desc" selected="selected">Lates</option>
               <option value="rand">Random Posts</option>
            </select>
         </fieldset>
      </td>
   </tr>
   <tr style="border-bottom: medium none;" class="compiler fold">
      <th scope="row">
         <div class="xform_field_th">
                        Block Style</div>
      </th>
      <td>
         <fieldset id="xform_demo-block_type_1" class=" xform-container-image_select" data-id="block_type_1" data-type="image_select">
            <div class="xform-table-container">
               <ul class="xform-image-select">
                  <li class="xform-image-select">
                     <label class=" xform-image-select-selected xform-image-select block_type_1_1" for="block_type_1_1">
                        <input class=" compiler noUpdate " id="block_type_1_1" name="xform_demo[block_type_1]" value="node" checked="checked" type="radio"/>
                        <img src="1-3.png" alt="node" class style=" width: 100%; "/>
                     </label>
                  </li>
                  <li class="xform-image-select">
                     <label class=" xform-image-select block_type_1_2" for="block_type_1_2">
                        <input class=" compiler noUpdate  noUpdate " id="block_type_1_2" name="xform_demo[block_type_1]" value="nodey" type="radio"/>
                        <img src="1-4.png" alt="nodey" class style=" width: 100%; "/>
                     </label>
                  </li>
               </ul>
            </div>
         </fieldset>
      </td>
   </tr>
   <tr style="display: none;" class="xform-section-indent-start">
      <th scope="row"/>
      <td/>
   </tr>
</table>

Answer 2

在谈论可能的解决方案之前，我会尝试转述以确认我对问题陈述的理解是正确的......

1. 您有一些 HTML 将被克隆以附加到容器中
2. 按钮会触发追加
3. 克隆的 HTML 上的多个属性中的计数器必须递增

OP 和我建议的解决方案都没有考虑其他常见的可能情况：

1. 删除元素后必须发生的情况：
   • 会重新计算计数器吗？
   • 计数器之间是否允许有间隙？
   • 等等……

无论如何，现在谈论解决方案，我不会使用OP中给出的代码。相反，我将提供一种通用方法，并将实际实施留作家庭作业：

HTML：

<!-- Container which will hold your elements -->
<div class="container">
    <!-- Original element, this block will be duplicated -->
    <div class="element">
        <input id="input1id" class="input1class" name="input1name" />
    </div>
</div>
<button type="button" id="trigger">Append Copy</button>

jQuery：

    $(document).ready(function(){
        // HTML to copy. Used an uncommon string (@@) as place holder for actual counter
        var elementCopy = '<div class="element">'+
'       <input id="input@@id" class="input@@class" name="input@@name" />'+
'   </div>';

        $('#trigger').on('click', function() {
            var count = $('.element').length;   // number of elements with class "element"
            var counter = count + 1;    // Counter to use for new element(s)
            var clone = elementCopy.replace(/\@\@/g, counter);      // Substitute counter for all @@ in elementCopy; note the 'g' switch (global) in regex
            $('.container').append(clone);  // Finally append new HTML
        })
    });

检查this fiddle。