Question

我有一个列表项目的有序列表。

XMLHttpRequest

我知道<ul id="fruit"> <li id="listI1">banana</li> <li id="listI2">apple</li> <li id="listI3">orange</li> <li id="listI4">grape</li> <li id="listI5">strawberry</li> </ul>会将该项目发送到$('#listI1').appendTo('#fruit')的底部，并且使用fruit以同样的方式将prependTo()发送到顶部。

如何将listI5移到listI1或listI2上方listI5的正上方？

Answer 1

您可以使用Jquery的after()功能。 http://api.jquery.com/after/

$('#list2').after($('#list1'));

Answer 2

听起来像after()或insertAfter()所使用的方法，具体取决于您喜欢的语法。以下两行将做同样的事情：

$('#list2').after($('#list1'));

$('#list1').insertAfter($('#list2'));

Answer 3

您需要使用insertAfter()在listI1下面插入listI2，然后使用insertBefore()在listI5上方插入listI4。

<强> insertAfter（）

var elem = $('#listI1');
elem.insertAfter('#listI2');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="fruit">
    <li id="listI1">banana</li>
    <li id="listI2">apple</li>
    <li id="listI3">orange</li>
    <li id="listI4">grape</li>
    <li id="listI5">strawberry</li>
</ul>

<强>的insertBefore（）

var elem = $('#listI5');
elem.insertBefore('#listI4');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="fruit">
    <li id="listI1">banana</li>
    <li id="listI2">apple</li>
    <li id="listI3">orange</li>
    <li id="listI4">grape</li>
    <li id="listI5">strawberry</li>
</ul>

如何使用jQuery在源代码中将元素向下移动？

3 个答案: