Question

I have generated html like this:

<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>

and I want to put other items inside 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>

I am creating group div:

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

but I when I do .append I adds all insted of

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

I have two divs with class mail. how to target only parent. Edit: http://jsfiddle.net/H6MYh/1/

Answer 1

try the following code:

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

EDIT:
for specific div:(not tested)

jQuery("div.google").each(function(){
    var $this = jQuery(this);
    $this.next('.mail').appendTo($this.find('.group'));
});