0

HTML の例:

<h2 class="x1">1</h2>
<h2 class="x2">2</h2>
<h2 class="x3">3</h2>
<h2 class="x4">4</h2>
<h2 class="x5">5</h2>

みたいに切り替えたい…

1
2 <---
3     |
4     |
5 <---

だから私はこれが好きです

$('.x2').insertBefore('.x5');
$('.x5').insertBefore('.x2');

だから私はこのような結果を得ます

1
3
4
5 <--- 
2 <---

どうすれば...のような結果を得ることができますか?

1
5 <---
3     |
4     |
2 <---

プレイグラウンド: http://jsfiddle.net/l2aelba/aHwSJ/

PS：できればやりたくない

$('.x2').insertBefore('.x5');
$('.x5').insertBefore('.x3');

要素を2つだけ選択する必要があります（別のものではありません）

4

5 に答える 5

1

この優れたソリューションhttps://stackoverflow.com/a/698386/975520から始めて、スイッチ機能を処理する独自の jQuery 関数を作成できます。

コードは次のとおりです。

jQuery.fn.swapWith = function(to) {
    return this.each(function() {
        var copy_to = $(to).clone(true);
        var copy_from = $(this).clone(true);
        $(to).replaceWith(copy_from);
        $(this).replaceWith(copy_to);
    });
};

そして、次のように使用します。

$(document).ready(function () {
    $('.x5').swapWith('.x2');
});

deep cloneメソッドを使用すると、バインドされたすべてのイベントが保持されるため、このソリューションに感謝します。

ここに実用的なフィドルがあります：http://jsfiddle.net/IrvinDominin/axvp9/

于 2013-06-04T09:55:59.237 に答える
0

一時的な div を使用:

var x2 = $('.x2');
var x5 = $('.x5');
var div =$('<div>');

x2.replaceWith(div);
x5.replaceWith(x2);
div.replaceWith(x5);
于 2013-06-04T09:43:04.067 に答える