第四个孩子用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

您可以使用.eq(3)选择第四个元素，然后使用.prepend()添加第一个位置。这个：

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

<强> Working Demo

Answer 2

  

在jquery中使用 prepend（）

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

Fiddle

或

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

Answer 3

将所有兄弟姐妹放下并包裹最后一个兄弟姐妹：

$('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 4

你可以选择任何一行

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

或者选择最后一个你可以使用.last（）

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

使用prepend方法来解决问题。

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

http://jsfiddle.net/S96qP/