更改命令div與jQuery

<div class="test one">aaa</div> 
<div class="test two">bbb</div> 
<div class="test three">ccc</div>

是否可以改變這個div與jQuery？我想收到：更改命令div與jQuery

<div class="test two">bbb</div> 
<div class="test three">ccc</div> 
<div class="test one">aaa</div>

我只能使用jQuery的

LIVE：http://jsfiddle.net/cmVyM/

我必使這隻有一個 - 如果文件已準備就緒。

來源

2011-10-02 David Apshid

聽起來像是jQuery UI的排序工作。 –

在我早些時候的回答中排序div的幾個例子：http://stackoverflow.com/questions/7623819/looking-for-a-javascript-solution-to-reorder-divs/7623918#comment9258056_7623918。 – jfriend00

與此問題相同： http://stackoverflow.com/questions/1363650/javascript-moving-element-in-the-dom – dan360

聽起來就像你想要移動最後的第一個div。

$.fn.insertAfter插入參數後匹配的元素：

$(".test.one").insertAfter(".test.three");

http://jsfiddle.net/rP8EQ/

編輯：如果你想添加的第一個到最後一個更通用的解決方案，而不訴諸明確類：

var tests = $('.test'); 
tests.first().insertAfter(tests.last());

來源

2011-10-02 19:28:20 Zirak

當有一組div具有相同的類名時，這不起作用。用'test-one'來說3個div，用'test-two'3來表示3個，用'test-three'來說另外3個。對這種情況有何建議？ –

@VineetKaushik你想要在'test-three'之後插入所有'test-one'還是特定的？如果前者已經發生，如果後者則選擇更具體的選擇器。 – Zirak

只要做$('.one').insertAfter('.three');

來源

2011-10-02 19:31:41 deviousdodo

只需使用insertAfter像以前回答說

http://jsfiddle.net/cmVyM/68/

var eerste = $('.one'); 
var tweede = $('.two'); 
var derde = $('.three'); 

tweede.insertAfter(derde); 
eerste.insertAfter(tweede);

來源

2014-01-10 13:25:23 Wannes

$("#botao").click(function(){  

$("#a3").insertBefore("#a1"); 

}); 

<div id="a1">a1</div> 
<div id="a2">a2</div> 
<div id="a3">a3</div> 

<div> 
<a id="botao">altera</a> 
</div>

參見：http://jsfiddle.net/GeraldoVilger/2B6FV/

來源

2014-02-10 20:22:18

只需要在稍後的日期找到這個答案，你可以添加一些關於它如何工作的基本評論。謝謝。 – Shawn

您可以通過此

var obj = $('.test.two'); 

obj.after(obj.prev());

做，所以，DIV之一， div二將改變他們的位置。

我希望它能幫助你。

來源

2015-08-04 04:25:08

下面是一個簡單的導航按鈕示例。

HTML

<ul> 
    <li>1 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li> 
    <li>2 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li> 
    <li>3 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li> 
    <li>4 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li> 
    <li>5 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li> 
    <li>6 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li> 
</ul>

的Javascript與jQuery

$('.up').on('click', function(e) { 
    var wrapper = $(this).closest('li') 
    wrapper.insertBefore(wrapper.prev()) 
}) 
$('.down').on('click', function(e) { 
    var wrapper = $(this).closest('li') 
    wrapper.insertAfter(wrapper.next()) 
})

這裏試試：https://jsfiddle.net/nguyenvuloc/vd105gst

來源

2017-06-11 05:01:13

它的很好的例子。但如果我想保存更新的訂單呢？ – TarangP

如果你想改變與相同的類名的div羣的階（例如下面給出）：

<div class="wrapper"> 
    <span class="text">First Heading</span> 
    <span class="number">1</span> 
</div> 
<div class="wrapper"> 
    <span class="text">Second Heading</span> 
    <span class="number">2</span> 
</div> 
<div class="wrapper"> 
    <span class="text">Third Heading</span> 
    <span class="number">3</span> 
</div>

您可以通過下面的jQuery代碼重新排序：

$('.wrapper .number').each(function() { 
    $(this).insertBefore($(this).prev('.text')); 
});

https://jsfiddle.net/farhanmae/9th3drvd/

來源

2017-11-28 09:17:07

更改命令div與jQuery

回答

相關問題