javascript - jQuery - 如何将一些带有文本的标签元素移动到最近的 div

Question

我有以下 HTML 结构:

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

现在我要搬家<i>..</i>标签内有值 <div>..</div>标签如:

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

我试过像这样使用 jQuery:

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

但不工作。知道如何移动<i>..</i>最接近的标签 <div>..</div>元素。

我的 JSFiddle:https://jsfiddle.net/47htz1yb/

谢谢

Answer 1

您可以使用each() 方法来完成这项工作。

$(".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>

使用上面的 CSS，icheckbox_flat-red_green 类中的每个 i 元素都获得 red 颜色。