jquery - 使用 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> ，这样做将使它始终如一地工作。 block 。

或者使用纯 JavaScript:

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