1

それは私が信じるトリッキーなものです。2つのタグをマージしたいと思います。たとえば、<span>IDが異なる2つは、次のように隣り合っています。

Lorem ipsum <span id="selected-1">dolor sit</span><span id="selected-2" title="important info here"> amet, consectetur</span> adipiscing elit.

最後に、toの属性をマージして保持すると、selected-1最終selected-2的に次のようなものが付属します。selected-2

Lorem ipsum <span id="selected-2" title="important info here">dolor sit amet, consectetur</span> adipiscing elit.

任意のヒント？私は本当にこれを理解することはできません。

ありがとう。

4

6 に答える 6

1

ここでjQueryを使用する必要は実際にはありません。これは、DOMノードを文字列化してから、それらを再解析してDOMに戻すというすべての作業に取り掛かる必要があります。

var span1=document.getElementById("selected-1"), 
    span2=document.getElementById("selected-2"),
    insert=span2.firstChild,
    elt;

while (elt=span1.lastChild) {
  insert=span2.insertBefore(elt,insert); // removes the node from span1
}

span1.parentNode.removeChild(span1);

OPがjQueryソリューションについて質問したのは事実です。しかし、誰かがスイスアーミーナイフで釘を打ち込む方法を尋ねた場合でも、代わりにハンマーを使用することを提案するのは合理的であるようです。特に、すでにハンマーを持っている場合は、その使用方法を知っている必要があります。使用すると100倍速くなります。

アプリケーションの大部分がjQueryを使用していることを認識しているため、jQueryをロードするための増分コストはありません。そして、それは確かに多くの場合満足のいく簡潔さを提供します-あなたがすべてを一列に並べるとき、その小さなオキシトシンは急いでいます。しかし、コストもあります。最大2桁のパフォーマンスコストがあり、実際に起こっていることからプログラマーを隠すコストがあります。

この場合、OPが基本的なDOM APIの4つについて知っていれば、要素をある場所から別の場所にループ移動しながら、単純な1行を作成する方法を自分で理解できたはずです。それを達成するために一緒にチェーンするjQueryの呪文のシーケンス、行き詰まり、SOに投稿する必要があります。

http://jsperf.com/combine-dom-nodesでのパフォーマンスの比較を検討してください。これは、jQueryソリューションが100倍遅いことを示しています。

一方、Brendan Eichでさえ、jQueryチェーンのワンライナーパラダイムに近づいているようで、次の例があります。

$(document).getTDs().getEven().hover().css("yellow").addCustomEvent("setSelected").setSelected(this.currentMagicNode).get.out("white").getTDs().getOdd().hover().css("yellow").addCustomEvent("setSelected").setSelected(this.currentMagicNode).out("white");

ブレンダン氏は、「後から考えると、JavaScriptがうまくいかなかった理由がわかります」とコメントしています。「これらのセミコロンと改行はすべて、コードを読むのを非常に難しくします。そして、コードを垂直方向ではなく水平方向に読みます— DUHHHH！JavaScriptは勝ちません！」http://clubajax.org/brendan-eich-redesigns-javascript-to-look-like-jquery/#more-1491を参照してください。

于 2012-06-21T02:49:13.937 に答える
1

これが私の1行バージョンです：

$('#selected-2').html( $('#selected-1').html() + $('#selected-2').html() ).prev().remove();

...そしてそれでさらに短いバージョン。

$('#selected-2').prepend($('#selected-1').html()).prev().remove();

短いバージョン=ダウンロードするコードが少ない（特にモバイルブラウザの場合）。

編集：私の短い1行の回答はリングに突っ込んでおり、このページで最も長いマークアップの回答と直接対決しているため、重要なのは常にベンチマーク速度ではなく、単にコードの機能と保守です。

さらに、1秒あたりの計算は、実際のページのレンダリングや実際のブラウザのページレンダリングとは一致しません。その場合、最終的には実際のパフォーマンスの向上は見られません。

IMHO、実際のマークアップで1行を使用すると、ユーザーが作成したエラー（iごとにドットを付けてtごとにクロス）が発生しやすく、より多くのデータ（.jsファイル）が作成されるコードのゴリアテと比較して、より実用的で常識的になります。ダウンロードして解析します。

于 2012-06-21T02:29:35.810 に答える
1

3行でそれを行う必要があります。

$("#selected-1").html($("#selected-1").html() + $("#selected-2").html());
$("#selected-1").attr("title", $("#selected-2").attr("title"));
$("#selected-2").remove()
于 2012-06-21T02:11:22.653 に答える
1

うまくいけば、これが最も簡単な方法です（厳密には例を参照してください）。

var s1 = $('#selected-1').html();
$('#selected-1').remove();
$('#selected-2').prepend(s1);

これはhttp://jsfiddle.net/KFXRe/で確認できます。

于 2012-06-21T02:15:24.593 に答える
0 
var s1= $('#selected-1');
var s2= $('#selected-2');
s2.html(s1.html()+s2.html());
s1.remove();

基本的に、私は要素を個別に取得します。次に、最初の要素からのhtmlと現在2番目の要素内にあるhtmlを2番目の要素に挿入します（または、上書きされます）。最後に、重要なことですが、最初の要素を削除します。

->>>>>>> jsFiddle <<<<<<-

于 2012-06-21T02:11:06.473 に答える
0

すべてのソリューションをテストしたわけではありませんが、次のコードが付属しています。

var $wrapper = $( "#selected-1, #selected-2" )
    .wrapAll( "<span title='" + $( "#selected-2" ).attr( "title" ) + "'></span>" )
    .parent();

$( "#selected-1, #selected-2" ).replaceWith(function() {
    return $( this ).html();
});

$wrapper.attr( "id", "selected-2" );

私のやり方が速いかどうかはわかりませんが...

于 2012-06-21T02:26:11.523 に答える