Czy mogę łatwo zamienić dwa elementy za pomocą jQuery?
Chcę to zrobić za pomocą jednej linii, jeśli to możliwe.
Mam element select i mam dwa przyciski do przesuwania opcji w górę lub w dół, a selektory zaznaczone i docelowe już mam na miejscu, robię to z if, ale zastanawiałem się, czy jest łatwiejszy sposób.
jquery
swap
javascript
juan
źródło
źródło
Odpowiedzi:
Znalazłem ciekawy sposób rozwiązania tego problemu przy użyciu tylko jQuery:
lub
:)
źródło
Paulo ma rację, ale nie jestem pewien, dlaczego klonuje dane elementy. Nie jest to naprawdę konieczne i spowoduje utratę wszelkich odniesień lub detektorów zdarzeń powiązanych z elementami i ich elementami podrzędnymi.
Oto wersja nieklonująca przy użyciu zwykłych metod DOM (ponieważ jQuery tak naprawdę nie ma żadnych specjalnych funkcji, które ułatwiłyby tę konkretną operację):
źródło
Nie, nie ma, ale możesz go podnieść:
Stosowanie:
Zauważ, że działa to tylko wtedy, gdy selektory pasują tylko do 1 elementu, w przeciwnym razie może dać dziwne wyniki.
źródło
Istnieje wiele skrajnych przypadków tego problemu, które nie są obsługiwane przez zaakceptowaną odpowiedź lub odpowiedź Bobince'a. Inne rozwiązania obejmujące klonowanie są na dobrej drodze, ale klonowanie jest drogie i niepotrzebne. Kusi nas, aby klonować, ze względu na odwieczny problem dotyczący zamiany dwóch zmiennych, w którym jednym z kroków jest przypisanie jednej ze zmiennych do zmiennej tymczasowej. Przypisanie (klonowanie) w tym przypadku nie jest potrzebne. Oto rozwiązanie oparte na jQuery:
źródło
Wiele z tych odpowiedzi jest po prostu błędnych w ogólnym przypadku, inne są niepotrzebnie skomplikowane, jeśli w rzeczywistości działają. JQuery
.before
i.after
metody robią większość tego, co chcesz, ale potrzebujesz trzeciego elementu, tak jak działa wiele algorytmów wymiany. To całkiem proste - stwórz tymczasowy element DOM jako symbol zastępczy podczas przenoszenia elementów. Nie ma potrzeby patrzeć na rodziców czy rodzeństwo, a już na pewno nie ma potrzeby klonowania ...1) wstaw tymczasowy div
temp
wcześniejthis
2) poruszać się
this
wcześniejthat
3) przemieszczają się
that
potemp
3b) usunąć
temp
Wtedy po prostu
DEMO: http://codepen.io/anon/pen/akYajE
źródło
Nie powinieneś potrzebować dwóch klonów, wystarczy jeden. Biorąc odpowiedź Paolo Bergantino, mamy:
Powinno być szybsze. Przekazanie mniejszego z dwóch elementów powinno również przyspieszyć działanie.
źródło
Wcześniej użyłem takiej techniki. Używam go do listy łączników na http://mybackupbox.com
źródło
end()
jeśli nie kontynuujesz łańcucha. co$('element1').clone().before('element2').end().replaceWith('element2');
clone()
nie zachowuje żadnego jquery,data()
chyba że określiszclone(true)
- ważna różnica, jeśli sortujesz, aby nie stracić wszystkich danychStworzyłem funkcję, która pozwala na przesuwanie wielu wybranych opcji w górę lub w dół
Zależności:
Najpierw sprawdza, czy pierwsza / ostatnia wybrana opcja może poruszać się w górę / w dół. Następnie przechodzi przez wszystkie elementy i wywołania
źródło
inny bez klonowania:
Mam rzeczywisty i nominalny element do zamiany:
wtedy
insert <div> before
iremove
później są potrzebne tylko wtedy, gdy nie możesz zapewnić, że zawsze istnieje element przed (w moim przypadku jest)źródło
.prev()
„s długości, a jeśli 0, a następnie.prepend()
do.parent()
:) W ten sposób nie trzeba tworzyć dodatkowe elementy.spójrz na wtyczkę jQuery „Swapable”
http://code.google.com/p/jquery-swapable/
jest zbudowany na "Sortable" i wygląda jak sortable (drag-n-drop, placeholder itp.), ale zamienia tylko dwa elementy: przeciągnij i upuść. Żadne inne elementy nie ulegają zmianie i pozostają na swojej aktualnej pozycji.
źródło
To jest odpowiedź oparta na logice odpowiedzi @lotif , ale nieco bardziej uogólniona
Jeśli dodasz / dodasz na początku po / przed rzeczywistym przeniesieniem elementów
=> klonowanie nie jest potrzebne
=> zdarzenia są zachowywane
Mogą się zdarzyć dwa przypadki
.prev()
ious” => możemy to ustawić dla drugiego celu.after()
..parent()
=>.prepend()
drugi cel możemy skierować do rodzica.Kod
Ten kod można by zrobić jeszcze krócej, ale zostawiłem go w ten sposób dla czytelności. Zwróć uwagę, że wstępne zapisywanie rodziców (w razie potrzeby) i poprzednich elementów jest obowiązkowe.
... nie krępuj się zawinąć kod wewnętrzny w funkcję :)
Przykładowe skrzypce mają dołączone dodatkowe zdarzenia kliknięcia, aby zademonstrować zachowanie zdarzeń ...
Przykładowe skrzypce: https://jsfiddle.net/ewroodqa/
... sprawdzi się w różnych przypadkach - nawet takich jak:
źródło
To jest moje rozwiązanie do przenoszenia wielu elementów podrzędnych w górę iw dół wewnątrz elementu nadrzędnego. Działa dobrze w przypadku przenoszenia wybranych opcji w polu listy (
<select multiple></select>
)Podnieść:
Padnij:
źródło
Jeśli chcesz zamienić dwa elementy zaznaczone w obiekcie jQuery, możesz użyć tej metody
http://www.vertstudios.com/blog/swap-jquery-plugin/
źródło
Chciałem rozwiązania, które nie używa clone (), ponieważ ma efekt uboczny z dołączonymi zdarzeniami, oto co ostatecznie zrobiłem
nie może być używane z obiektami jQuery zawierającymi więcej niż jeden element DOM
źródło
Jeśli masz wiele kopii każdego elementu, musisz naturalnie zrobić coś w pętli. Niedawno miałem taką sytuację. Dwa powtarzające się elementy, które musiałem zmienić, miały klasy i element div kontenera:
Poniższy kod pozwolił mi na iterację wszystkiego i odwrócenie ...
źródło
Zrobiłem to za pomocą tego fragmentu
źródło
Zrobiłem tabelę do zmiany kolejności obiektów w używanej bazie danych .after () .before (), więc to jest z tego, co mam eksperyment.
Wstaw obj1 przed obj2 i
zrób odwrotnie.
Więc jeśli obj1 jest po obj3 i obj2 po obj4, a jeśli chcesz zmienić miejsce obj1 i obj2, zrobisz to tak, jak
Powinno to zrobić BTW, możesz użyć .prev () i .next () do znalezienia obj3 i obj4, jeśli nie masz jeszcze dla nich jakiegoś indeksu.
źródło
jeśli nodeA i nodeB są rodzeństwem, lubią dwoje
<tr>
w tym samym<tbody>
, możesz po prostu ich użyć$(trA).insertAfter($(trB))
lub$(trA).insertBefore($(trB))
zamienić, to działa dla mnie. i nie musisz$(trA).remove()
wcześniej dzwonić , w przeciwnym razie musisz ponownie powiązać niektóre zdarzenia kliknięcia$(trA)
źródło
Utwórz taką funkcję jQuery
Podziękowania dla Yannick Guinness na https://jsfiddle.net/ARTsinn/TVjnr/
źródło
Najlepszą opcją jest sklonowanie ich metodą clone ().
źródło
Myślę, że możesz to zrobić bardzo prosto. Na przykład, powiedzmy, że masz następną strukturę: ...
a wynik powinien być
jQuery:
Mam nadzieję, że to pomoże!
źródło