javascript - 使用 jQuery 克隆 html 元素

Question

我有以下元素

    <div class="col-xs-4">
       <label>Camere</label>
       <div class="selector">
          <select id='rooms'  class="full-width">
             <option value="1">1</option>
             <option value="2">2</option>
             <option value="3">3</option>
             <option value="4">4</option>
          </select>
       </div>
    </div>
    </div>
    <hr>
    <!--START-->
    <div id="room-1">
    <h5 class="title">CAMERA 1</h5>
    <div class="row">
       <div class="col-xs-4">
          <label>ADULTS</label>
          <div  class="selector">
             <select id='adults-1' name="rooms[0][adult]" class="full-width">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
             </select>
          </div>
       </div>
       <div class="col-xs-4">
          <label>Copii</label>
          <div  class="selector">
             <select id='kids-1'  name="rooms[0][child]" class="full-width">
                <option value="0">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                >
             </select>
          </div>
       </div>
    </div>
    <div class="age-of-children no-display">
       <div class="row">
          <div class="col-xs-4 child-age-field">
             <label>Copil 1</label>
             <div class="selector validation-field">
                <select class="full-width" name="rooms[0][age][]" id='age-1'>
                   <option value="0">0</option>
                   <option value="1">1</option>
                   <option value="2">2</option>
                   <option value="3">3</option>
                   <option value="4">4</option>
                   <option value="5">5</option>
                   <option value="6">6</option>
                   <option value="7">7</option>
                   <option value="8">8</option>
                   <option value="9">9</option>
                   <option value="10">10</option>
                   <option value="11">11</option>
                </select>
             </div>
          </div>
       </div>
    </div>
<!-- END -->

我用下面的 jQuery 克隆它:

$(document).ready(function() {
    //onchange of rooms-count
    $('#rooms').change(function() {
        var roomsSelected = $('#rooms option:selected').val();
        var roomsDisplayed = $('[id^="room-"]:visible').length;
        var roomsRendered = $('[id^="room-"]').length;


        //if room count is greater than number displayed - add or show accordingly
        if (roomsSelected > roomsDisplayed) {

            for (var i = 1; i <= roomsSelected; i++) {
                var r = $('#room-' + i);
                if (r.length == 0) {

                    var clone = $('#room-1').clone(); //clone
                    clone.children(':first').text("CAMERA " + i);
                    //change ids appropriately
                    setNewID(clone, i);
                    clone.children('div').children('select').each(function() {
                        setNewID($(this), i);
                    });
                    $(clone).insertAfter($('#room-' + roomsRendered));

                } else {
                    //if the room exists and is hidden 
                    $(r).show();
                }
            }

        } else {
            //else if less than room count selected - hide
            for (var i = ++roomsSelected; i <= roomsRendered; i++) {
                $('#room-' + i).hide();
            }
        }

    });

    function setNewID(elem, i) {
        oldID = elem.attr('id');
        newId = oldID.substring(0, oldID.indexOf('-')) + "-" + i;
        elem.attr('id', newId);
    }

});

我如何更改 jQuery，以便我可以更改/计算来自名称“房间[0]..”

示例:选择了 2 个房间

名称属性上的第一个包装:rooms[0]第二个包装重复其名称属性:rooms[1] 等JsFiddle可以找到here

谢谢

Answer 1

你可以试试

var clone = $('#room-1').clone(); //clone
clone.children(':first').text("CAMERA " + i);
//change ids appropriately
clone.find('[id]').addBack().attr('id', function (_, id) {
    return id.replace(/\d+$/, i)
});
clone.find('[name]').attr('name', function (_, name) {
    return name.replace(/rooms\[\d+\]/, 'rooms[' + i + ']')
});

演示:Fiddle