CODEWITHSUNDEEP
javascriptjqueryhtmlappenddetach
Websir
Websir

Reputation: 3

Detach and append divs/html jquery

I thought this would be kinda straightforward but i cant wrap my head around this. I got to following html:

<div id="foo">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>     
</div>

<div id="bar">
<div class="test">test1</div>
<div class="test">test2</div>
<div class="test">test3</div>
<div class="test">test4</div>
</div>

I need to grab/detach the div's .test and put/append them into the .item div's. So the first div .test needs to go in the first div .item, the second div .test to the second div .item etc. So it becomes:

<div id="foo">
<div class="item">1<div class="test">test1</div></div>
<div class="item">2<div class="test">test2</div></div>
<div class="item">3<div class="test">test3</div></div>
<div class="item">4<div class="test">test4</div></div>    
</div>

Now i found some jquery code and i came to this:

var child = $('#bar').find("div").eq(0);
var parent = $('#foo').eq(0);

child.detach();
parent.append( child );

This works but as suspected, it detaches/appends the first div. Now i need to detach/append them all one by one and from reading a lot of topics, i think i need to put a loop/each in there somewhere but i have no idea how and im not getting any closer after screwing around for hours.

Anyone who can put me in the right direction with this?

Upvotes: 0

Views: 1517

Answers (3)

Richard Marskell - Drackir
Richard Marskell - Drackir

Reputation: 13312

You can move all of them easily by just using the append() method and selecting all the divs:

$('#bar').append( $('#foo div') )
/* This is just for showing that the elements actually moved. */
#foo { background:red; }
#bar { background:blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="foo">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>     
</div>

<div id="bar">
<div class="test">test1</div>
<div class="test">test2</div>
<div class="test">test3</div>
<div class="test">test4</div>
</div>
<div>

Alternatively, if you want to do something with each element, you can use .each():

$('#foo div').each(function(i, elem) {
  var $elem = $(elem);
  //Do stuff
  $('#bar').append($elem);
});
/* This is just for showing that the elements actually moved. */
#foo { background:red; }
#bar { background:blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="foo">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>     
    </div>

    <div id="bar">
    <div class="test">test1</div>
    <div class="test">test2</div>
    <div class="test">test3</div>
    <div class="test">test4</div>
    </div>
<div>

Upvotes: 1

r4phG
r4phG

Reputation: 515

I think there are two solutions for your issue : .childern() function or usiing jQuery selectors

For example using selector : 

$("#bar > div")

or using children() function : 

$("#bar").children("div");

also look at this post, you may have your answer here : jQuery - get all divs inside a div with class ".container"

Upvotes: 0

Stryner
Stryner

Reputation: 7328

On solution is to get both collections and iterate over one of the collections. Also note that you don't need to use .detach. .append will already do that.

var $fooItems = $("#foo .item");
var $barTests = $("#bar .test");

$fooItems.each(function(index, el) {
    $(this).append($barTests.eq(index));
});

Example Fiddle

Upvotes: 0

Related Questions