如何将li元素移动到特定位置？

<ul id="listcomments"> 
    <li>Comment 1</li> 
    <li>Comment 2</li> 
    <li>Comment 3</li> 
    <li>Comment 4</li> 
    <li>Comment 5 </li> 
    <li>Comment 6</li> 
    <li>Comment 7</li> 
    <li>Comment 8</li> 
    <li>Child comment of #5 is this</li> 
</ul>

在上述元件中，我需要移动评论8利用jquery的评论2里旁边。如何实现它？如何将li元素移动到特定位置？

来源

2017-04-21 Joy

你到目前为止尝试过什么？请展示你的工作。 – Soviut

也许你想用这个：

$("#listcomments").sortable();

检查此链接。 https://jqueryui.com/sortable/

来源

2017-04-21 05:15:33 smzapp

使用Jquery UI Sortable来实现你想要的。

$("#sortable").sortable(); 
 
$("#sortable").disableSelection();

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>jQuery UI Sortable - Default functionality</title> 
 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
 
    <style> 
 
    #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; } 
 
    #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; } 
 
    #sortable li span { position: absolute; margin-left: -1.3em; } 
 
    </style> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
</head> 
 
<body> 
 
    
 
<ul id="sortable"> 
 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li> 
 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li> 
 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li> 
 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li> 
 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li> 
 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li> 
 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li> 
 
</ul> 
 
    
 
    
 
</body> 
 
</html>

Jquery UI Sortable Reference

来源

2017-04-21 05:16:52

这里有一个快速的解决方案。希望能帮助到你！

$(document).ready(function() { 
 
    $('#listcomments li:eq(7)').insertAfter("#listcomments li:nth-child(1)"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<ul id="listcomments"> 
 
    <li>Comment 1</li> 
 
    <li>Comment 2</li> 
 
    <li>Comment 3</li> 
 
    <li>Comment 4</li> 
 
    <li>Comment 5 </li> 
 
    <li>Comment 6</li> 
 
    <li>Comment 7</li> 
 
    <li>Comment 8</li> 
 
    <li>Child comment of #5 is this</li> 
 
</ul>

来源

2017-04-21 05:20:00 HenryDev

与jQuery和第n个孩子选择，你可以做到这一点的帮助。

$(document).ready(function(){ 
$('li:nth-child(8)').css({ 
'color':'red', 
'position':'absolute', 
'left':'400px', 
'top':'34px' 
}); 
})

见琴：https://jsfiddle.net/o3gn55n6/2/

注：由于只有提供的代码，我创建了小提琴，并把值。但是你可以根据你的需要改变你的价值。为了获得更大的灵活性，您需要发布代码的整个上下文。

这是跨浏览器兼容的。请参阅第n个孩子的jQuery这里： https://www.w3schools.com/jquery/sel_nthchild.asp

基本上你会想你的里8号元素能够灵活地放在需要的地方。

来源

2017-04-21 05:22:18

如何将li元素移动到特定位置？

回答

相关问题