jQuery - How to move some tag element with text inside to closest div

Question

I have following HTML structure:

<span class="green_box">
    <div class="icheckbox_flat-red_green" style="position: relative;">
        <input type="radio" name="minimal-radio" data-cid="5" data-uid="10" data-sid="1" data-pid="1" value="1" style="position: absolute; opacity: 0;">
        <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins>
    </div>
    <i class="">1</i>
</span>
<span class="green_box">
    <div class="icheckbox_flat-red_green" style="position: relative;">
        <input type="radio" name="minimal-radio" data-cid="5" data-uid="10" data-sid="1" data-pid="1" value="1" style="position: absolute; opacity: 0;">
        <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins>
    </div>
    <i class="">2</i>
</span>
<span class="green_box">
    <div class="icheckbox_flat-red_green" style="position: relative;">
        <input type="radio" name="minimal-radio" data-cid="5" data-uid="10" data-sid="1" data-pid="1" value="1" style="position: absolute; opacity: 0;">
        <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins>
    </div>
    <i class="">3</i>
</span>

Now I want to move <i>..</i> tag with value inside <div>..</div> tag like:

<span class="green_box">
    <div class="icheckbox_flat-red_green" style="position: relative;">
        <input type="radio" name="minimal-radio" data-cid="5" data-uid="10" data-sid="1" data-pid="1" value="1" style="position: absolute; opacity: 0;">
        <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins>
        <i class="">1</i>
    </div>    
</span>
<span class="green_box">
    <div class="icheckbox_flat-red_green" style="position: relative;">
        <input type="radio" name="minimal-radio" data-cid="5" data-uid="10" data-sid="1" data-pid="1" value="1" style="position: absolute; opacity: 0;">
        <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins>
        <i class="">2</i>
    </div>    
</span>
<span class="green_box">
    <div class="icheckbox_flat-red_green" style="position: relative;">
        <input type="radio" name="minimal-radio" data-cid="5" data-uid="10" data-sid="1" data-pid="1" value="1" style="position: absolute; opacity: 0;">
        <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins>
        <i class="">3</i>
    </div>
</span>

I have tried with jQuery like:

$('.green_box i').appendTo('.green_box div');

but not working. Any idea how to move <i>..</i> tag with closest <div>..</div> element.

My JSFiddle: https://jsfiddle.net/47htz1yb/

Thanks

Answer 1

You can use each() method to do this work.

 $(".green_box").each(function(){ $(this).find(".icheckbox_flat-red_green").append($(this).find("i")); }); 

 .icheckbox_flat-red_green > i { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span class="green_box"> <div class="icheckbox_flat-red_green"> <input type="radio" name="minimal-radio"> <ins class="iCheck-helper"></ins> </div> <i class="">1</i> </span> <span class="green_box"> <div class="icheckbox_flat-red_green"> <input type="radio" name="minimal-radio"> <ins class="iCheck-helper"></ins> </div> <i class="">2</i> </span> <span class="green_box"> <div class="icheckbox_flat-red_green"> <input type="radio" name="minimal-radio"> <ins class="iCheck-helper"></ins> </div> <i class="">3</i> </span> 

Using above CSS, every i element in icheckbox_flat-red_green class get red color.

Answer 2

Try this: https://jsfiddle.net/47htz1yb/3/

$('.green_box i').each(function(index, icon) {
    $(icon).siblings('div').append(icon)
})

Problem with $('.green_box i').appendTo('.green_box div'); is that it will basically take all the i elements and put it in the first .green_box div .

What you need is to cycle through all the i elements, find sibling div and append the i there.

Answer 3

Try this:

$('.green_box i').each(function(){ 
    var $this = $(this),
        $prev = $this.prev(),
        $i = $this.remove();

    $prev.append($i);
});

Answer 4

$('.green_box i').each(function (i) {
    $('.green_box div').eq(i).append($(this));
});