JQuery克隆表并添加到最后一个表的末尾，表变为不正确的顺序

时间：2014-11-13 00:30:22

标签： jquery clone insertafter

问题我试图克隆一张桌子，并成功拥有。但它的顺序是不正确的，我无法弄清楚为什么它没有以正确的顺序显示。

JQuery的： 

    data = [1,2,3];
    for (var i=0; i<data.length; i++) {
        //console.log(ike_transform[i]);
        path = data[i];
        console.log(path);

        if (i!=0) { // clones table for next iteration
            $("#phase_1_tranforms_tables").clone().insertAfter("div.div_transform:last");
        }

        $("#transform_num").html(i+1); // table #
    }

HTML： 

 <div id="div_transforms" class="div_transform">
     <table class="table table-bordered table-condensed" id="phase_1_tranforms_tables">
        <tr>
            <th rowspan="4" id="transform_num"></th>
            <th class="second_head">$('Authentication')</th>
            <td id="sel_pu_xform_auth"></td>
        </tr>
        <tr>
            <th class="second_head">$('Encryption')</th>
            <td id="sel_pu_xform_encr"></td>
        </tr>
        <tr>
            <th class="second_head">$('SA Life')</th>
            <td id="sel_pu_xform_sa_life"></td>
        </tr>
        <tr>
            <th class="second_head">$('Key Group')</th>
            <td id="sel_pu_xform_key_group"></td>
        </tr>
     </table>
 </div>

当前屏幕截图： enter image description here

期望的结果： 正是它现在正是如此，但表格的顺序并不正确。应该是表1，表2，表3等。请有人帮我扭转这种疯狂行为！

更新 这是它的小提琴代码。我不得不改变一些HTML，因为它不像Cheetah模板和某些奇怪的东西。 http://jsfiddle.net/tylerip87/xtb51wed/4/

因为我的工作服务器今天决定大肆宣传，所以我没有新截图。但是jsfiddle使用.appendTo显示表为3,1,2。

1 个答案:

答案 0 :(得分：1)

如果不运行代码，我建议使用：

$("#phase_1_tranforms_tables").clone().appendTo("div.div_transform:last");

因为您的原始代码正是按照您的要求进行的，并且在 div.div_transform:last元素之后立即插入克隆表，因此之前之前 - 插入的表元素，看起来像代码以某种方式颠倒了它正在做的事情的顺序。

参考appendTo()的问题，是的。这是使用id选择器更新元素文本的错误。基本上：

  1. id选择器（getElementById('idString')，$('#idString')）仅返回第一个匹配元素（按设计），因为只有一个元素，或 none ，任何给定的id。
  2. 1出现在正确位置的原因是因为克隆仅发生在第一个循环之后（i != 0时），所以：
    • 选择了id='transform_num'的元素，并将其更新为i + 1（1）。
    • 克隆第一个表格，并在第一个表格之后附加 <保留数字1）。
    • 第一个table-element（原始表）选中了#transform_num元素并更新为i + 1（2），克隆保留了1的数量（因为无效的重复id）。
    • 再次克隆第一个table-element，将克隆附加到父级（此克隆的编号为2）。
    • 选择了第一个表格元素#transform_num（再次）并更新为i + 1（3）。

    3. 克隆的顺序是正确的，使用多个id（一如既往！）会导致（不必要的）问题。我实施的解决方案是：

    var data = [1, 2, 3],
    path;
for (var i = 0; i < data.length; i++) {
    // and always declare local variables to avoid the global name-space:
    path = data[i];

    if (i != 0) { // clones table for next iteration
        $("#phase_1_tranforms_tables").clone().appendTo("div.div_transform");
    }
    // and the error was here, using an 'id' that was duplicated
    // and therefore invalid, and incrementing only the *first*
    // element matched by the id selector:
    // $("#transform_num").html(i + 1);

    // Instead, I changed 'id' to a 'class' (so: valid), and
    // selected only the last element with that given class:
    $('div.div_transform .transform_num').last().text(i + 1);
}

    JS Fiddle demo

    或者，你可以简单地使用一个类来选择所有附加的元素，并根据它在集合中的位置更新 all 的文本：

    // Selecting all the elements and updated each of their text,
// using the anonymous function available to the method, and the
// first argument (name is irrelevant, but it's always the index
// of the element amongst the returned collection):
$('div.div_transform .transform_num').text(function (index) {
    return index + 1;
});

    JS Fiddle demo

    当然，您可以使用CSS（再次使用<p>的类）：

    div.div_transform {
    counter-reset: transform_num;
}

table p::before {
    counter-increment: transform_num;
    content: counter(transform_num);
/* the above is important, below is aesthetic; adjust to taste */
    display: block;
    width: 1em;
    text-align: center;
    font-weight: bold;
}

    JS Fiddle demo

    参考文献：

相关问题
最新问题