3

複製:
段落のグループに親要素を追加するにはどうすればよいですか?

ドキュメント内で次の HTML ブロックが繰り返されています

<!-- first block -->
<div class="first">
   My first div
</div>
<div class="second">
   My second div
</div>

<!-- second block -->
<div class="first">
   My first div
</div>
<div class="second">
   My second div
</div>

...

Div を jQuery でラップして、このような結果の HTML を取得するにはどうすればよいですか...

<!-- first block -->
<div class="container">
   <div class="first">
      My first div
   </div>    
   <div class="second">
      My second div
   </div>
</div>

<!-- second block -->
<div class="container">
   <div class="first">
      My first div
   </div>    
   <div class="second">
      My second div
   </div>
</div>

...
4

2 に答える 2

17

あなたは幸運です、それはまさにそのためのものwrapAllです：

$(".first, .second").wrapAll('<div class="container"></div>');

実例| ソース

あなたの編集は質問を著しく変更します。包含ブロック内でのみ上記を実行する必要がある場合は、包含ブロックをループして、wrapAllそれらのコンテンツにのみ適用できます。質問で指定していない div をグループ化する方法を特定する方法が必要です。

div の周囲にある種のコンテナがある場合は、次のようにすることができます。

$(".block").each(function() {
  $(this).find(".first, .second").wrapAll('<div class="container"></div>');
});

その例では、div が class のコンテナー内にあると仮定しました"block"。

実例| ソース

それらを識別する構造的な方法がない場合は、別の方法で識別する必要があります。たとえば、ここでは、 が表示されるたびにfirst、グループ化を停止する必要があると想定してこれを行います。

var current = $();

$(".first, .second").each(function() {
  var $this = $(this);
  if ($this.hasClass('first')) {
    doTheWrap(current);
    current = $();
  }
  current = current.add(this);
});
doTheWrap(current);

function doTheWrap(d) {
  d.wrapAll('<div class="container"></div>');
}

実例| ソース

それが機能するのは、ドキュメントの順序$()で要素が得られるためです。したがって、それらを順番にループして保存し、新しいものが表示されるたびに前の要素をラップすると(そしてもちろん、最後にクリーンアップされます)、次のようになります。望ましい結果。first

または、同じことを行う別の方法がありますwrapAll。最初に一致した要素が a であることに依存していますfirst(したがって、seconds の前にfirsts はありません!):

var current;

$(".first, .second").each(function() {
  var $this = $(this);
  if ($this.hasClass('first')) {
    current = $('<div class="container"></div>').insertBefore(this);
  }
  current.append(this);
});

実例| ソース

于 2012-12-14T11:26:31.393 に答える
3 
$('div').wrapAll('<div class="container" />');

それを行うでしょうが、それは他のdivもラップするので、おそらく：

$('.first, .second').wrapAll('<div class="container" />');

優れている。

于 2012-12-14T11:26:07.487 に答える