>我有以下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>
元素的标签。
My JSFiddle: https://jsfiddle.net/47htz1yb/
谢谢
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,类中的每个i
元素icheckbox_flat-red_green
都会获得red
颜色。
试试这个: https://jsfiddle.net/47htz1yb/3/
$('.green_box i').each(function(index, icon) {
$(icon).siblings('div').append(icon)
})
$('.green_box i').appendTo('.green_box div');
的问题在于,它基本上会把所有i
元素都放在第一.green_box div
。
您需要的是循环浏览所有i
元素,找到同级div
并将i
附加到那里。
试试这个:
$('.green_box i').each(function(){
var $this = $(this),
$prev = $this.prev(),
$i = $this.remove();
$prev.append($i);
});
$('.green_box i').each(function (i) {
$('.green_box div').eq(i).append($(this));
});