0

私のHTMLは次のようになります。

<div class='background'>
    <div class='item' id='item1'>... </div>
    <div class='item' id='item2'>... </div>
    <div class='item' id='item3'>... </div>
    ... (more 'item's follow)
</div> <!-- background>

jQueryを使用して私が達成しようとしてきたことは、background前にdivを閉じてからitem2、再度開くことです。このような：

$('#item2').before('</div>');
$('#item2').after('<div class="background">');

しかし、jQuery はこれを次のように解決することを強硬に主張します。

<div class='background'>
    <div class='item' id='item1'>... </div>
    <div class="background"></div>
    <div class='item' id='item2'>... </div>
    <div class='item' id='item3'>... </div>
    ...
</div> <!-- background>

これは明らかに役に立たない。

必死になって、メソッドを使用してタグを.html()強制的に表示しようとしました。</div>... <div>役に立たない: jQuery は、私がそのマークアップを挿入したいと思っているとは信じられません。(この厄介な構文:

var oldc = $('#item2').html();
var newc = '</div></div>'+oldc+'<div class="background"><div>';
$('#item2').html(newc);

次のように解決されます。

<div class="item" id="item2">...
<div class="background"><div></div></div>
</div>

(Firebug で表示)

jQueryを使用してこれを解決する簡単な方法はありますか、それとも根本的に間違っていますか?

明確にするために：私が最終的にしたいのはこれです：

<div class='background'>
    <div class='item' id='item1'>... </div>
</div>
    <div class='item' id='item2'>... </div>
<div class="background">
    <div class='item' id='item3'>... </div>
    ... (more 'item's follow)
</div> <!-- background>
4

2 に答える 2

3

DOM 操作でそのような終了タグを追加することはできません。必要な新しい div を作成し、既存の div の後に追加してから、いくつかの DOM 要素を元の背景 div から新しい背景 div に移動できます。次のコードでそれを行うことができます。

var newContainer = $("<div class='background'></div>");
$(".background").after(newContainer);
$("#item2").nextAll().appendTo(newContainer);

これにより、新しい背景 div が作成され、現在の背景 div の後に配置され、その後にすべての兄弟が取得#item2され、それらが新しい背景 div に移動されます。

実際のデモ: http://jsfiddle.net/jfriend00/G3uyA/

OK、あなたの説明に基づいて、このコードは上記と同じことを行いますが、item2 を引き出して背景と同じレベルにします:

var origContainer = $(".background");
var target = $("#item2");
$("<div class='background'></div>").insertAfter(origContainer).append(target.nextAll());
target.insertAfter(origContainer);

実際のデモ: http://jsfiddle.net/jfriend00/7Dsqw/

于 2012-08-09T00:40:48.757 に答える
1

.backgroundこれを行う最も効率的な方法は、デフォルトでこれらの要素を divに含めないことだと思います。

次に、後に続くすべての要素を対象とし、それらを次のようにラップするために#item1使用します。wrapAll().background

$("#item1").nextAll().wrapAll( $("<div>").addClass("background") );

次に、それをターゲット#item1にして使用し、2 番目の要素wrap()でラップします。.background

$("#item1").wrap( $("<div>").addClass("background") );

それらをチェーンすることもできます：

$("#item1")
    .nextAll()
    .wrapAll( $("<div>").addClass("background") )
    .end()
    .wrap( $("<div>").addClass("background") );

例。

最初の後にあるものをラップする理由は#item1、1 回#item1がラップされると、使用しnextAll()ても何も得られないためです。残りの要素はその兄弟ではなくなるからです。

編集:あなたの明確化の後、私は上記の例をわずかに変更して、に含めないように#item2しましたnextAll()。このように#item1して、独自の.background要素とその後#item2の要素に配置されます。#item2影響を受けません:

$("#item1")
    .nextAll(":not(#item2)")
    .wrapAll( $("<div>").addClass("background") )
    .end()
    .wrap( $("<div>").addClass("background") );

例。

.background最後に、既存の HTML からオリジナルを実際に削除できない場合は、 を使用unwrap()して親を削除し、すべての子を残すことができます。

$("#item1")
    .unwrap()
    .nextAll(":not(#item2)")
    .wrapAll( $("<div>").addClass("background") )
    .end()
    .wrap( $("<div>").addClass("background") );

例。

于 2012-08-09T00:56:03.013 に答える