Czy można zmienić kolejność elementów <li> za pomocą JavaScript lub czystego jQuery. Więc jeśli mam głupią listę jak poniżej:uporządkuj listę elementów - jQuery?
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Cheese</li>
</ul>
Jak przesunąć elementy listy wokół? Podobnie jak element listy z Cheese przed elementem listy z Foo lub przenieść Foo do po Bar.
Czy to możliwe? Jeśli tak to jak?
var ul = $("ul");
var li = ul.children("li");
li.detach().sort();
ul.append(li);
Jest to proste przykład gdzie węzły <li> są sortowane według w jakiejś domyślnej kolejności. Wzywam odłączenia, aby uniknąć usunięcia jakichkolwiek danych/zdarzeń związanych z węzłami.
Można przekazać funkcję do sortowania i użyć niestandardowego komparatora do sortowania.
li.detach().sort(function(a, b) {
// use whatever comparison you want between DOM nodes a and b
});
Wystarczy popatrzeć na jQuery UI sortable
Podczas gdy bardzo fajne, nie potrzebuję użytkownika, aby móc uciekać, po prostu chcę wiedzieć, czy mogę to programowo, za pomocą jQuery lub po prostu javascript. – Alex
Ach, widzę! Naprawdę nie rozumiem tego ze swojego pytania –
coś takiego?
var li = $('ul li').map(function(){
return this;
}).get();
$('ul').html(li.sort());
byłem nieco zagubiony może być chcąc coś takiego ...
$('ul#list li:first').appendTo('ul#list'); // make the first to be last...
$('ul#list li:first').after('ul#list li:eq(1)'); // make first as 2nd...
$('ul#list li:contains(Foo)').appendTo('ul#list'); // make the li that has Foo to be last...
ta linia nie działa, jak się wydaje, '$ ('ul # list li: first'). After ('ul # list li: eq (1)');' –
Oto plugin jQuery do pomocy z tej funkcjonalności: http://tinysort.sjeiti.com/
miła i prosta wtyczka –
Jeśli ktoś chce zmienić kolejność elementów, przesuwając je w górę/w dół jakieś listy o jeden krok na raz ...
//element to move
var $el = $(selector);
//move element down one step
if ($el.not(':last-child'))
$el.next().after($el);
//move element up one step
if ($el.not(':first-child'))
$el.prev().before($el);
//move element to top
$el.parent().prepend($el);
//move element to end
$el.parent().append($el);
To dlatego kocham stackoverflow. Dziękujemy @alexg – iggy2012
Jedną z moich ulubionych rzeczy w jQuery jest to, jak łatwo jest tak szybko napisać drobne dodatki.
Tutaj utworzyliśmy mały dodatek, który przyjmuje szereg selektorów i używa go do uporządkowania dzieci elementów docelowych.
// Create the add-on
$.fn.orderChildren = function(order) {
\t this.each(function() {
\t \t var el = $(this);
\t \t for(var i = order.length - 1; i >= 0; i--) {
\t \t \t el.prepend(el.children(order[i]));
\t \t }
\t });
\t return this;
};
// Call the add-on
$(".user").orderChildren([
\t ".phone",
\t ".email",
\t ".website",
\t ".name",
\t ".address"
]);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="user">
\t <li class="name">Sandy</li>
\t <li class="phone">(234) 567-7890</li>
\t <li class="address">123 Hello World Street</li>
\t <li class="email">[email protected]</li>
\t <li class="website">https://google.com</li>
</ul>
<ul class="user">
\t <li class="name">Jon</li>
\t <li class="phone">(574) 555-8777</li>
\t <li class="address">123 Foobar Street</li>
\t <li class="email">[email protected]</li>
\t <li class="website">https://apple.com</li>
</ul>
<ul class="user">
\t <li class="name">Sarah</li>
\t <li class="phone">(432) 555-5477</li>
\t <li class="address">123 Javascript Street</li>
\t <li class="email">[email protected]</li>
\t <li class="website">https://microsoft.com</li>
</ul>Funkcja pętli do tyłu tablicy i wykorzystuje .prepend tak, że wszystkie elementy niewybrane jest popychany do końca.
To było właśnie to, czego szukałem - dzięki za udostępnienie @SandyGifford –
Nie mogę tego uzyskać do pracy. Czy ktoś może to demonstrować w akcji na jsfiddle? – Irfan
Działa dobrze dla mnie. Oto przykład jsfiddle: http://jsfiddle.net/Afbrt/ –
Piękne rozwiązanie. dokładnie to, czego potrzebowałem.dziękuję, niezły panie, że nie zastanawiałeś się nad tym cudownym piątkowym popołudniem –