0

问题我正在尝试克隆一个表，并且成功了。但是它的顺序不正确，我无法弄清楚为什么它没有以正确的顺序显示。

查询：

    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>

当前截图： 在此处输入图像描述

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

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

我没有新的截图，因为我的工作服务器今天决定大便。但是 jsfiddle 使用 .appendTo 将表格显示为 3、1、2。

4

1 回答 1

1

在不运行您的代码的情况下，我建议使用：

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

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

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

  1. 选择id器 ( getElementById('idString'), $('#idString')) 仅返回第一个匹配元素（按设计） ，因为任何给定的 .都应该只有一个元素，或者没有id。
  2. 1出现在正确位置的原因是因为克隆只发生在第一个循环之后（when i != 0），所以：
    • 带有 的元素id='transform_num'被选中，更新为i + 1( 1)。
    • 第一个表被克隆，克隆附加在第一个表之后（保留数字1）。
    • 第一个表元素（原始表）的#transform_num元素被选中并更新为i + 1（2），克隆保留了数量1（因为无效的重复id）。
    • 再次克隆第一个表元素，将克隆附加到父级（此克隆具有 number 2）。
    • 第一个表格元素#transform_num被选中（再次）并更新为i + 1（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 小提琴演示。

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

// 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 小提琴演示。

当然，您可以只使用 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 小提琴演示。

参考：

于 2014-11-13T00:39:02.693 回答