Question

<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>

在上面的元素中，我需要使用 jquery 在评论2 li旁边移动评论8 li。如何实现呢？

Answer 1

也许你想用这个：

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

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

Answer 2

这是一个快速的解决方案。希望它有所帮助！

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

使用Jquery UI Sortable来实现您的目标。

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Jquery UI Sortable Reference

Answer 4

在jquery和nth-child选择器的帮助下，你可以做到。

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

请参阅小提琴：https://jsfiddle.net/o3gn55n6/2/

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

这是跨浏览器兼容的。在这里查看nth-child jquery： https://www.w3schools.com/jquery/sel_nthchild.asp

基本上你会希望你的第8个元素可以灵活地放在理想的位置。

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

4 个答案: