Question

我试图在JS中按顺序克隆和插入项目，我可以克隆和添加元素，但顺序似乎不正确，我试图为单选按钮分配一个值，所以我可以将单选按钮绑定到文本字段如下所示：

<div id='1'>
            <div class="template">
                <div>
                    <label class="right inline">Response:</label>
                </div>
                <div>
                    <input type="text" name="responseText[]" value="" maxlength="400" />
                </div>
                <div>
                    <input type="checkbox" name="responsCheck[]" value="0" />
                </div>
            </div>
            <div>
                <input type="button" name="addNewRow" value="Add Row" />
            </div>
        </div>
JS:

var $counter = 0;
var $template = $('.template');
$('input[type=button]').click(function() {
    var $elem = $template.clone();
    $elem.find("input:text").val("");
    $copy.find("input:radio").val($counter);
    $elem.insertAfter($template);
});

例如，如果我添加三行，则检查按钮的值按以下顺序排列：

0
2
1

我需要按以下顺序排列值：

0
1
2

有人有任何想法吗？我认为一定是我插入克隆的方式？当我使用单选按钮这条线似乎工作： $ elem.insertAfter（$（＆＃39;＃1 .clone＆＃39;）。last（））;

但是当使用复选框时，它似乎没有任何想法？

Answer 1

对我而言，添加第二个条目$ template的问题看起来仍然指向第一个条目。

我会尝试在点击处理程序中移动$ template初始化并改变它，如下所示。

var $counter = 0;
$('input[type=button]').click(function() {
    var $template = $('.template:last');
});

这样$ template应该指向插入的最后一个模板，它应该按预期工作。

Answer 2

也许您需要使用：

$("#1").append($elem);

而不是

$elem.insertAfter($template);

或者每次都选择最后一次。

var $template = $('.template').last();

Answer 3

将它们放入js数组并按val：

对它们进行排序

function SortByValue(elem1, elem2){
   var e1 = Number($(elem1).val());
   var e2 = Number($(elem2).val()); 
   return ((e1 < e2) ? -1 : ((e1 > e2) ? 1 : 0));
}

var sortedValues = $.makeArray($(jQSelector)).sort(SortByValue);

Here is a fiddle

Javascript插入克隆订购问题

3 个答案: