交換元素通過對

Question

我有一個模板：

<div class="recursos_expandidos"> 
    <section>a</section> 
    <a href="#">b</a> 
    <section>c</section> 
    <a href="#">d</a> 
</div> 

而且我想反轉部分和主持人的位置，以便在div顯示：

<div class="recursos_expandidos"> 
    <a href="#">b</a> 
    <section>a</section> 
    <a href="#">d</a> 
    <section>c</section> 
</div> 

jQuery的或JavaScript將是巨大的，謝謝

Answer 1

您可以使用疊代部分元素，他們的下一個兄弟後插入他們一個元素：

$('.recursos_expandidos section').each(function(){ 
    $(this).insertAfter($(this).next()); 
}); 

Working Demo

Answer 2

我不知道你到底想要什麼，但你也可以考慮使用Flexbox的和操作只是爲了財產。 （https://developer.mozilla.org/en-US/docs/Web/CSS/order）

Answer 3

可以使用after()有回調prev()與next()和after()

$('section').each(function() { 
 
    $(this).next('a').after(this) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="recursos_expandidos"> 
 
    <section>a</section> 
 
    <a href="#">b</a> 
 
    <section>c</section> 
 
    <a href="#">d</a> 
 
</div>

或者更簡單的方法幫助做到這一點

$('a').after(function() { 
 
return $(this).prev('section') 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="recursos_expandidos"> 
 
    <section>a</section> 
 
    <a href="#">b</a> 
 
    <section>c</section> 
 
    <a href="#">d</a> 
 
</div>