1

同様の質問に対する多くの回答を見てきましたが、私の特定のケースではこれを理解できないようです。私の jQuery ロジックは、.each()関数の最後の要素にのみ適用されます。誰かが理由を理解するのを手伝ってくれますか? 最終的に、リスト内の項目を 2 つの列に分割しようとしています。

HTMLは次のとおりです。

<ul class="sub-menu">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
    <li>item 7</li>
    <li>item 8</li>
</ul>
<ul class="sub-menu">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
    <li>item 7</li>
    <li>item 8</li>
</ul>
<ul class="sub-menu">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
    <li>item 7</li>
    <li>item 8</li>
</ul>

そして、ここに私のjQueryがあります

<script type="text/javascript">
jQuery(document).ready(function(){

        var col1 = jQuery('<li class="col1">col1</li>'); // object which I will append the list items into
        var col2 = jQuery('<li class="col2">col2</li>'); // object which I will append the list items into

        jQuery('.sub-menu').each(function() {
            var items = jQuery(this).html(); // get original items from list
            jQuery(this).empty(); // clear original items from list

            jQuery(this).append(col1).append(col2); // just appending new columns for now, will add the original items to either col1 or col2 once this is working.
        });

});
</script>

私のコードは元のリスト項目を適切にキャプチャし、現在のリストをクリアしますが、リストへの列の追加はループ.sub-menuの最後の要素に対してのみ行われます。.each()つまり、2 つの列は最後に追加されるだけ.sub-menuで、最初の 2 つの列にはリスト項目がありません。

アイデア？

4

2 に答える 2

3

あなたが説明している問題は、col1 と col2 を最初のリストに追加し、次に同じ要素を 2 番目に追加し、最後に 3 番目に追加することです。

毎回新しい要素を作成するか、オリジナルを複製する必要があります。

これが更新されたコードです（.clone()col1とcol2を追加した場所に追加しました） var col1 = jQuery('col1'); // リスト項目を var col2 = jQuery('col2') に追加するオブジェクト // リスト項目を追加するオブジェクト

jQuery('.sub-menu').each(function() {
    var items = jQuery(this).html(); // get original items from list
    jQuery(this).empty(); // clear original items from list

    jQuery(this).append(col1.clone()).append(col2.clone()); // just appending new columns for now, will add the original items to either col1 or col2 once this is working.
        });​
于 2012-07-26T18:51:46.740 に答える
2

あなたは見つけようとしています：

var col1 = jQuery('<li class="col1">col1</li>');

まだ存在しないオブジェクトを見つけることはできません。jQuery次のように、単に関数を削除します。

var col1 = '<li class="col1">col1</li>';
var col2 = '<li class="col2">col2</li>';

http://jsfiddle.net/frnYY/

于 2012-07-26T18:48:38.247 に答える