第四個孩子用jQuery設定在第一位置

Question

你好我的HTML結構如下圖所示

<ul> 
    <li class="inner_m">first</li> 
    <li class="inner_m">second</li> 
    <li class="inner_m">third</li> 
    <li class="inner_m">fourth</li> 
</ul> 

現在我將如何通過jQuery的設置此結構像下面

<ul> 
    <li class="inner_m">fourth</li> 
    <li class="inner_m">first</li> 
    <li class="inner_m">second</li> 
    <li class="inner_m">third</li> 
</ul> 

Answer 1

要向下移動所有的兄弟姐妹和包裹最後一上來：

$('li:last-child').each(function() { 
    $(this).prependTo(this.parentNode); 
}); 

Demo

您也可以在這裏使用$('li:nth-child(4)')，但:last-child在您的情況碰巧是一回事。

我在這裏使用.each()的原因是因爲如果您有多個<ul>塊，那麼這樣做會使它一致地工作。

或者用普通的JavaScript：

[].forEach.call(document.querySelectorAll('li:last-child'), function(node) { 
    node.parentNode.insertBefore(node, node.parentNode.firstChild); 
}); 

Answer 2

您可以使用.eq(3)選擇第四個元素然後用.prepend()在第一position.try這個附加：

$("ul").prepend($(".inner_m:eq(3)")); 

Working Demo

Answer 3

使用前置（） jQuery中

$("ul li:eq(3)").remove(); 
$("ul").prepend("<li class='inner_m'>fourth</li>"); 

Fiddle

或

$('li:last-child').prependTo('ul'); 

Answer 4

您可以選擇任何行

https://api.jquery.com/last-child-selector/

或選擇最後你可以使用。去年（）

Answer 5

可以使用before()方法爲。

$('li:eq(0)').before($('li:eq(3)')); 

Demo

Answer 6

試試這個：

$(document).ready(function(){ 
    $this= $('.inner_m:eq(3)'); 
    $this.insertBefore($this.siblings(':eq(0)')); 
}); 

DEMO

Answer 7

$(document).ready(function() { 
    $li_fo = $('li').eq(3); 
    $li_fo.prependTo('ul'); 
}); 

Answer 8

使用前置方法this.here是你的問題的解決方案。

$('li:last-child').each(function() { 
$(this).prependTo(this.parentNode); 
}); 

http://jsfiddle.net/S96qP/