使用 jquery 将所选 li 元素之后的所有元素移动到开头

Question

是否可以使用 jquery 将选定的 li 元素之后的所有元素移动到开头？ 例如，如果我从下面的 li 中选择 3。

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>

结果

<ul>
<li>4</li>
<li>5</li>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

Answer 1

我是这样解决的：

$('li').click(function () {
    $(this).nextAll().prependTo('ul');
});

Answer 2

我不确定这是最好的解决方案，但它应该按预期工作

 // Set a click event listener $("ul").on( "click", "li", function() { // The first element in the ul list const first = $("ul li:eq(0)"); // The current element - the element you clicked on const current = $(this); // The current element's index (starts from 0) const currentIndex = current.index(); // Total amount of ul items const totalCount = $("ul li").length; // Loop from the current element position + 1 to the last one for (let i = currentIndex + 1; i < totalCount; i++) { const next = $("ul li:eq(" + i + ")"); // Insert the clone of next element before first one first.before(next.clone()); // Remove the original of the next element from the list next.remove(); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>