复制字段元素和重复项的位置

Duplicating field elements and position of duplicates

本文关键字：位置 字段 元素 复制      更新时间：2023-09-26

我有以下代码库：

http://jsfiddle.net/XpAk5/47/

单击按钮时使用的JS在这里。 我把它附加到 #advTrains。 这在所扮演的位置（#kpPositions）中工作正常。 当我查看它时，为什么代码的行为会有所不同，这没有意义。

$('#addTraining').click(function(){
    //increment the value of our counter
    $('#kpAdvancedTrain').val(Number($('#kpAdvancedTrain').val()) + 1);
    //clone the first .item element
    var newItem = $('div.advtrain').first().clone();
    //recursively set our id, name, and for attributes properly
    childRecursive(newItem, 
        // Remember, the recursive function expects to be able to pass in
        // one parameter, the element.
        function(e){
            setCloneAttr(e, $('#kpAdvancedTrain').val());
    });
    // Clear the values recursively
    childRecursive(newItem, 
        function(e){
            clearCloneValues(e);
    });
    // Finally, add the new div.item to the end
    newItem.appendTo($('#advTrains'));
});

元素和 ID 正确递增，但是我一生都无法弄清楚为什么当我单击"添加位置"时，添加的框出现在按钮上方（如我所愿），但是当我单击"添加高级培训"时，它出现在框下方。 我希望"添加高级培训"也出现在按钮上方。

我确定这很简单，但是我已经查看此代码一段时间了，并且无法想出发生这种情况的原因。

有什么想法吗？ 谢谢！

您缺少结束注释标记：

<!--.controls-->

为了帮助发现它，在小提琴中运行快速整理重新格式化为：

<!-- Advanced training code begin -->
<div id="advTrains">
    <input type="hidden" id="kpAdvancedTrain" name="kpAdvancedTrain" value="0" />
    <div class="advtrain" id="advtrain">
        <div class="control-group">
            <label class="control-label" for="item-0-name">Advanced Training</label>
            <div class="controls">
                <input type="text" name="kpAdvancedTrain_0" id="kpAdvancedTrain_0" class="input-large" />
            </div>
            <!--.controls>
            </div><!-- .control-group-->
        </div>
        <!-- .advtrain -->

错误出在您的 HTML 中：有一个注释您忘记关闭，因此其中一个结束的div 标签被注释掉了。关闭该注释，您的元素将添加到适当的位置。

<div class="control-group">
    <label class="control-label" for="item-0-name">Advanced Training</label>
    <div class="controls">
         <input type="text" name="kpAdvancedTrain_0" id="kpAdvancedTrain_0" class="input-large">
    </div>
    <!--.controls> --> <!-- this comment wasn't closed -->
    </div><!-- .control-group-->
</div>

发现错误：您忘记关闭最后一个div 标签。

    <!-- Advanced training code begin -->    
<div id="advTrains">
    <input type="hidden" id="kpAdvancedTrain" name="kpAdvancedTrain" value="0">
        <div class="advtrain" id="advtrain">
            <div class="control-group">
                <label class="control-label" for="item-0-name">Advanced Training</label>
                    <div class="controls">
                        <input type="text" name="kpAdvancedTrain_0" id="kpAdvancedTrain_0" class="input-large">
                    </div> <!--.controls>
            </div><!-- .control-group-->
        </div><!-- .advtrain -->   
</div><!-- #advTrains -->
</div> <!----NEED TO CLOSE LAST DIV ------>

编辑：实际上，您忘了关闭评论。它保留了您的一个div 注释掉（这就是为什么添加额外的div 修复它的原因。您需要像这样关闭它：

<!-- .controls -->
相关文章：