CODEWITHSUNDEEP
jqueryhtml
Karthik Ravichandran
Karthik Ravichandran

Reputation: 1283

How to move the li element to particular position?

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

In the above element , i need to move comment 8 li next to the comment 2 li using jquery. How to achieve it?

Upvotes: 2

Views: 2201

Answers (4)

sumit chakraborty
sumit chakraborty

Reputation: 141

With the help of jquery and nth-child selector you can do it.

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

See the fiddle : https://jsfiddle.net/o3gn55n6/2/

NOTE: With the code provided only, I have created the fiddle and put the values. But you can do what you want with that by changing values according to your need. For more flexibility you would want to post the entire context of your code.

This is cross-browser compatible. See for nth-child jquery here : https://www.w3schools.com/jquery/sel_nthchild.asp


Essentially you would want your li 8th element to be flexible to be put in desired place.

Upvotes: 0

HenryDev
HenryDev

Reputation: 4953

Here's a quick solution. Hope it helps!

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

Upvotes: 1

smzapp
smzapp

Reputation: 829

Maybe you want to use this:

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

Check this link. https://jqueryui.com/sortable/

Upvotes: 1

Mayank Pandeyz
Mayank Pandeyz

Reputation: 26258

Use Jquery UI Sortable to achieve what you want.

$( "#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

Upvotes: 0

Related Questions