0

問題テーブルのクローンを作成しようとしていますが、成功しました。しかし、その順序は正しくありません。正しい順序で表示されない理由がわかりません。

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>

現在のスクリーンショット: ここに画像の説明を入力

望ましい結果: まさに今の状態ですが、テーブルの順序が正しくありません。表 1、表 2、表 3 などである必要があります。誰かがこの狂気を逆転させるのを手伝ってください!

更新 これはそのためのフィドルコードです。HTML は Cheetah テンプレートが気に入らないため、一部の HTML を変更する必要がありました。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は、クローン作成が最初のループの後でのみ発生するためi != 0です ( when )。
    • の要素が選択され、 ( )id='transform_num'に更新されます。i + 11
    • 最初のテーブルが複製され、その最初のテーブルの後に複製が追加されます (番号は保持されます1)。
    • 最初のテーブル要素 (元のテーブル) の要素が選択され、 ( ) に#transform_num更新され、クローンは(無効な複製のため) の数を保持します。i + 121id
    • 最初の table-element が再度複製され、複製が親に追加されます (この複製の番号は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 に答える