[英]jQuery - How to move some tag element with text inside to closest div
我有以下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>
現在我想在<div>..</div>
標簽內移動<i>..</i>
標簽,如:
<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/
謝謝
您可以使用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
元素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));
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.