Append Child Elements to a Child Element in the same parent

Question

How do you append child elements to a sibling using jQuery?

html

<div class="parent"> <div class="child one">...</div> <div class="child">...</div> <div class="child">...</div> </div> <div class="parent"> <div class="child one">...</div> <div class="child">...</div> <div class="child">...</div> </div>

Script

$('.child').each(function(i, obj){ if(!$(obj).hasClass('one')){ $(obj).appendTo( .. Stuck here .. '.one'); } });

I can get the parent object but the trouble is then selecting the child with class 'one'.

Essentially I want to move all siblings so that the become children of the first child.

<div class="parent"> <div class="child one"> <div class="child">...</div> <div class="child">...</div> </div> </div> <div class="parent"> <div class="child one"> <div class="child">...</div> <div class="child">...</div> </div> </div>

xdazz · Accepted Answer · 2014-04-04 14:48:37Z

2

You want to append all the child not one into child one?

$('.child').not('.one').appendTo('.one');

THE WORKING DEMO.

answered Apr 4, 2014 at 14:48

xdazz

161k38 gold badges255 silver badges278 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3416023 Over a year ago

This is almost what I am looking for only I can use appendTo('.one') because there will be multiple instances of parent with child 'one'

Derek · Accepted Answer · 2014-04-04 15:25:08Z

Get each element with class one, then append its siblings with class child.

$('.child.one').each(function(i, obj){ $(obj).siblings('.child').each(function(j, child){ $(child).appendTo(obj); }); });

Working Demo

Note: if you want the child elements outside the one element, replace appendTo with after.

Milind Anantwar · Accepted Answer · 2014-04-04 14:48:34Z

try this:

$('.child').each(function(){ if(!$(this).hasClass('one')){ $(this).appendTo('.one'); }});

Working Demo

Collectives™ on Stack Overflow

Append Child Elements to a Child Element in the same parent

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related