如何將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元素移動到特定位置？

回答

相關問題