0

私は次のようなhtmlを生成しました：

<div class="row">
   <div class="item google"></div>
   <div class="item mail"></div>
   <div class="item apps"></div>
   <div class="item plus"></div>
</div>
<div class="row">
   <div class="item google"></div>
   <div class="item mail"></div>
   <div class="item apps"></div>
   <div class="item plus"></div>
</div>

Google 内に他のアイテムを配置したい 

<div class="row">
   <div class="item google">
     <div class="group">
       <div class="item mail"></div>
       <div class="item apps"></div>
       <div class="item plus"></div>
     </div>
  </div>
</div>
<div class="row">
  <div class="item google">
     <div class="group">
       <div class="item mail"></div>
       <div class="item apps"></div>
       <div class="item plus"></div>
     </div>
  </div>
</div>

グループ div を作成しています:

jQuery("div.google").append('<div class="group"></div>');

しかし、私が.appendを行うとき、私はすべてのinstedを追加します

    jQuery("div.row > div.google > div.group").append(jQuery("div.mail"));

クラスメールを含む 2 つの div があります。親だけをターゲットにする方法。編集: http://jsfiddle.net/H6MYh/1/

4

4 に答える 4

2

次のコードを試してください。

jQuery("div.google").append('<div class="group"></div>');
jQuery("div.google").each(function(){
    var $this = jQuery(this);
    $this.siblings().appendTo($this.find('.group'));
});

編集: 特定の div:(未テスト)

jQuery("div.google").each(function(){
    var $this = jQuery(this);
    $this.next('.mail').appendTo($this.find('.group'));
});
于 2012-08-31T15:33:37.347 に答える
1

使用できますwrapAll。

$('div.row').each(function(){
     $('div:not(:first)', this).wrapAll('<div class="group"></div>')
})

フィドル

于 2012-08-31T15:33:34.930 に答える
0 
jQuery("div.google")

クラス「google」のすべての div を取得します。最初のオカレンスのみを選択するには、それに [0] を追加します。

jQuery("div.google")[0].append('<div class="group"></div>');
jQuery("div.row > div.google > div.group").append(jQuery("div.mail"));
于 2012-08-31T15:31:30.763 に答える
0

$(".row").each(...) を使用して各行を順番に処理し、結果のオブジェクトで .find(...) を使用して、その子のみをターゲットにすることができます...

于 2012-08-31T15:34:06.160 に答える