Wie verschiebe ich das li Element in eine bestimmte 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 dem obigen Element, muss ich bewegen Kommentar 8 li neben dem li Kommentar 2 jquery verwenden. Wie erreiche ich das?Wie verschiebe ich das li Element in eine bestimmte Position?

Quelle

2017-04-21 Joy

Was haben Sie bisher versucht? Bitte zeigen Sie Ihre Arbeit. – Soviut

Vielleicht möchten Sie diese verwenden:

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

prüfen Link. https://jqueryui.com/sortable/

Quelle

2017-04-21 05:15:33 smzapp

Verwenden Sie Jquery UI Sortable, um zu erreichen, was Sie wollen.

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

Quelle

2017-04-21 05:16:52

Hier ist eine schnelle Lösung. Ich hoffe es hilft!

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

Quelle

2017-04-21 05:20:00 HenryDev

Mit Hilfe von jquery und n-te-Kind-Selektor Sie es tun können.

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

Siehe Geige: https://jsfiddle.net/o3gn55n6/2/

HINWEIS: Mit dem Code nur unter der Voraussetzung, habe ich die Geige erstellt und die Werte setzen. Aber Sie können tun, was Sie wollen, indem Sie die Werte entsprechend Ihren Bedürfnissen ändern. Für mehr Flexibilität möchten Sie den gesamten Kontext Ihres Codes veröffentlichen.

Dies ist browserübergreifend kompatibel. Siehe für n-Kind jquery hier: https://www.w3schools.com/jquery/sel_nthchild.asp

Im Wesentlichen würden Sie Ihre li 8. Element wollen flexibel sein, in den gewünschten Ort gebracht zu werden.

Quelle

2017-04-21 05:22:18

Wie verschiebe ich das li Element in eine bestimmte Position?

Antwort

Verwandte Themen