Czy istnieje natywna funkcja jQuery do przełączania elementów?

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.

Znalazłem ciekawy sposób rozwiązania tego problemu przy użyciu tylko jQuery:

$("#element1").before($("#element2"));

lub

$("#element1").after($("#element2"));

:)

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ę):

function swapNodes(a, b) {
    var aparent = a.parentNode;
    var asibling = a.nextSibling === b ? a : a.nextSibling;
    b.parentNode.insertBefore(a, b);
    aparent.insertBefore(b, asibling);
}

Nie, nie ma, ale możesz go podnieść:

jQuery.fn.swapWith = function(to) {
    return this.each(function() {
        var copy_to = $(to).clone(true);
        var copy_from = $(this).clone(true);
        $(to).replaceWith(copy_from);
        $(this).replaceWith(copy_to);
    });
};

Stosowanie:

$(selector1).swapWith(selector2);

Zauważ, że działa to tylko wtedy, gdy selektory pasują tylko do 1 elementu, w przeciwnym razie może dać dziwne wyniki.

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:

function swap(a, b) {
    a = $(a); b = $(b);
    var tmp = $('<span>').hide();
    a.before(tmp);
    b.before(a);
    tmp.replaceWith(b);
};

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 .beforei .aftermetody 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 ...

$.fn.swapWith = function(that) {
  var $this = this;
  var $that = $(that);

  // create temporary placeholder
  var $temp = $("<div>");

  // 3-step swap
  $this.before($temp);
  $that.before($this);
  $temp.after($that).remove();

  return $this;
}

1) wstaw tymczasowy div tempwcześniejthis

2) poruszać się thiswcześniejthat

3) przemieszczają się thatpotemp

3b) usunąć temp

Wtedy po prostu

$(selectorA).swapWith(selectorB);

DEMO: http://codepen.io/anon/pen/akYajE

Nie powinieneś potrzebować dwóch klonów, wystarczy jeden. Biorąc odpowiedź Paolo Bergantino, mamy:

jQuery.fn.swapWith = function(to) {
    return this.each(function() {
        var copy_to = $(to).clone(true);
        $(to).replaceWith(this);
        $(this).replaceWith(copy_to);
    });
};

Powinno być szybsze. Przekazanie mniejszego z dwóch elementów powinno również przyspieszyć działanie.

Wcześniej użyłem takiej techniki. Używam go do listy łączników na http://mybackupbox.com

// clone element1 and put the clone before element2
$('element1').clone().before('element2').end();

// replace the original element1 with element2
// leaving the element1 clone in it's place
$('element1').replaceWith('element2');

Stworzyłem funkcję, która pozwala na przesuwanie wielu wybranych opcji w górę lub w dół

$('#your_select_box').move_selected_options('down');
$('#your_select_boxt').move_selected_options('up');

Zależności:

$.fn.reverse = [].reverse;
function swapWith() (Paolo Bergantino)

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

swapWith (element.next () lub element.prev ())

jQuery.fn.move_selected_options = function(up_or_down) {
  if(up_or_down == 'up'){
      var first_can_move_up = $("#" + this.attr('id') + ' option:selected:first').prev().size();
      if(first_can_move_up){
          $.each($("#" + this.attr('id') + ' option:selected'), function(index, option){
              $(option).swapWith($(option).prev());
          });
      }
  } else {
      var last_can_move_down = $("#" + this.attr('id') + ' option:selected:last').next().size();
      if(last_can_move_down){
        $.each($("#" + this.attr('id') + ' option:selected').reverse(), function(index, option){
            $(option).swapWith($(option).next());
        });
      }
  }
  return $(this);
}

inny bez klonowania:

Mam rzeczywisty i nominalny element do zamiany:

            $nominal.before('<div />')
            $nb=$nominal.prev()
            $nominal.insertAfter($actual)
            $actual.insertAfter($nb)
            $nb.remove()

wtedy insert <div> beforei removepóźniej są potrzebne tylko wtedy, gdy nie możesz zapewnić, że zawsze istnieje element przed (w moim przypadku jest)

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.

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

1. Jeden cel ma coś „ .prev()ious” => możemy to ustawić dla drugiego celu .after().
2. Jeden cel jest pierwszym dzieckiem to .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.

$(function(){
  var $one = $("#one");
  var $two = $("#two");
  
  var $onePrev = $one.prev(); 
  if( $onePrev.length < 1 ) var $oneParent = $one.parent();

  var $twoPrev = $two.prev();
  if( $twoPrev.length < 1 ) var $twoParent = $two.parent();
  
  if( $onePrev.length > 0 ) $onePrev.after( $two );
    else $oneParent.prepend( $two );
    
  if( $twoPrev.length > 0 ) $twoPrev.after( $one );
    else $twoParent.prepend( $one );

});

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

<div>
  <div id="one">ONE</div>
</div>
<div>Something in the middle</div>
<div>
  <div></div>
  <div id="two">TWO</div>
</div>

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ść:

$(parent).find("childrenSelector").each((idx, child) => {
    $(child).insertBefore($(child).prev().not("childrenSelector"));
});

Padnij:

$($(parent).find("childrenSelector").get().reverse()).each((idx, child) => {
    $(opt).insertAfter($(child).next().not("childrenSelector"));
});

Jeśli chcesz zamienić dwa elementy zaznaczone w obiekcie jQuery, możesz użyć tej metody

http://www.vertstudios.com/blog/swap-jquery-plugin/

Chciałem rozwiązania, które nie używa clone (), ponieważ ma efekt uboczny z dołączonymi zdarzeniami, oto co ostatecznie zrobiłem

jQuery.fn.swapWith = function(target) {
    if (target.prev().is(this)) {
        target.insertBefore(this);
        return;
    }
    if (target.next().is(this)) {
        target.insertAfter(this);
        return
    }

    var this_to, this_to_obj,
        target_to, target_to_obj;

    if (target.prev().length == 0) {
        this_to = 'before';
        this_to_obj = target.next();
    }
    else {
        this_to = 'after';
        this_to_obj = target.prev();
    }
    if (jQuery(this).prev().length == 0) {
        target_to = 'before';
        target_to_obj = jQuery(this).next();
    }
    else {
        target_to = 'after';
        target_to_obj = jQuery(this).prev();
    }

    if (target_to == 'after') {
        target.insertAfter(target_to_obj);
    }
    else {
        target.insertBefore(target_to_obj);
    }
    if (this_to == 'after') {
        jQuery(this).insertAfter(this_to_obj);
    }
    else {
        jQuery(this).insertBefore(this_to_obj);
    }

    return this;
};

nie może być używane z obiektami jQuery zawierającymi więcej niż jeden element DOM

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:

<div class="container">
  <span class="item1">xxx</span>
  <span class="item2">yyy</span>
</div> 
and repeat...

Poniższy kod pozwolił mi na iterację wszystkiego i odwrócenie ...

$( ".container " ).each(function() {
  $(this).children(".item2").after($(this).children(".item1"));
});

Zrobiłem to za pomocą tego fragmentu

// Create comments
var t1 = $('<!-- -->');
var t2 = $('<!-- -->');
// Position comments next to elements
$(ui.draggable).before(t1);
$(this).before(t2);
// Move elements
t1.after($(this));
t2.after($(ui.draggable));
// Remove comments
t1.remove();
t2.remove();

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.

$(obj1).after($(obj2))

Wstaw obj1 przed obj2 i

$(obj1).before($(obj2)) 

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

$(obj1).before($(obj4))
$(obj2).before($(obj3))

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.

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)

$('.five').swap('.two');

Utwórz taką funkcję jQuery

$.fn.swap = function (elem) 
{
    elem = elem.jquery ? elem : $(elem);
    return this.each(function () 
    {
        $('<span></span>').insertBefore(this).before(elem.before(this)).remove();
    });
};

Podziękowania dla Yannick Guinness na https://jsfiddle.net/ARTsinn/TVjnr/

Najlepszą opcją jest sklonowanie ich metodą clone ().

Myślę, że możesz to zrobić bardzo prosto. Na przykład, powiedzmy, że masz następną strukturę: ...

<div id="first">...</div>
<div id="second">...</div>

a wynik powinien być

<div id="second">...</div>
<div id="first">...</div>

jQuery:

$('#second').after($('#first'));

Mam nadzieję, że to pomoże!