我想在 .date 和 .department 之間移動 .tiletitle。我嘗試使用例如 $(".tiletitle").appendTo($(".oneline")) 但頁面上有多個 .oneline 元素。如何定位父母的兄弟姐妹并將其放在 .date 和 .department 之間？
<div class="sub-section">
<div>
<div class="tiletitle">Title</div>
</div>
<div class="oneline">
<div class="section-field date">01 May 2022</div>
<div class="section-field department">Cleaning</div>
<div class="section-field location">New York, NY</div>
<div class="section-field country">USA</div>
</div>
</div>
uj5u.com熱心網友回復：
你可以這樣做：
$('.sub-section .date').after(function() {
return $(this).closest('.sub-section').find('.tiletitle')
})
這也應該確保它在你有多個子部分的內部作業
演示
顯示代碼片段
$('.sub-section .date').after(function() {
return $(this).closest('.sub-section').find('.tiletitle')
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sub-section">
<div>
<div class="tiletitle">Title</div>
</div>
<div class="oneline">
<div class="section-field date">01 May 2022</div>
<div class="section-field department">Cleaning</div>
<div class="section-field location">New York, NY</div>
<div class="section-field country">USA</div>
</div>
</div>uj5u.com熱心網友回復：
我設法解決了這個問題，我使用 Jquery 將“.tiletitle”附加到“.sub-section>div.oneline”。在此程序后，我還洗掉了空 div：
let div1 = $(".tiletitle");
let div2 = $(".sub-section>div.oneline");
div2.append(div1)
$('.sub-section >div')[0].remove()
我使用 CSS 對元素進行排序：
.sub-section .oneline {
display: flex;
flex-direction: column;
}
.date {
order: -1;
}
.tiletitle {
order: 0;
}
.department {
order: 1;
}
.location {
order: 2;
}
.country {
order: 3;
}
https://codepen.io/fabiano-guimar-es-rocha/pen/dydXqzX
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/472736.html
標籤：jQuery