Öğeleri değiştirmek için yerel bir jQuery işlevi var mı?

JQuery ile iki öğeyi kolayca değiştirebilir miyim?

Mümkünse bunu bir satırla yapmak istiyorum.

Bir seçme öğesi var ve seçenekleri yukarı veya aşağı taşımak için iki düğme var ve zaten seçilmiş ve hedef seçiciler var, bunu bir if ile yapıyorum, ama daha kolay bir yol olup olmadığını merak ediyordum.

Ben sadece jQuery kullanarak bu çözmek için ilginç bir yol buldum:

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

veya

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

:)

Paulo haklı, ama neden ilgili unsurları klonladığından emin değilim. Bu gerçekten gerekli değildir ve öğeler ve torunları ile ilişkili referansları veya olay dinleyicilerini kaybeder.

İşte düz DOM yöntemleri kullanan klonlamayan bir sürüm (jQuery'nin bu işlemi kolaylaştırmak için gerçekten özel bir işlevi olmadığından):

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);
}

Hayır, yok, ama birini kırbaçlayabilirsiniz:

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);
    });
};

Kullanımı:

$(selector1).swapWith(selector2);

Bunun yalnızca seçicilerin her biri yalnızca 1 öğeyle eşleşmesi durumunda işe yaradığını unutmayın, aksi takdirde garip sonuçlar verebilir.

Bu soruna, kabul edilen cevap veya bobince'nin cevabı tarafından ele alınmayan çok sayıda uç durum vardır. Klonlamayı içeren diğer çözümler doğru yoldadır, ancak klonlama pahalı ve gereksizdir. İki değişkeni nasıl değiştireceğimize dair asırlık problemi nedeniyle klonlamaya meyilliyiz, buradaki adımlardan biri değişkenlerden birini geçici bir değişkene atamaktır. Bu durumda atamaya (klonlama) gerek yoktur. İşte jQuery tabanlı bir çözüm:

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

Bu cevapların birçoğu genel durum için yanlıştır, diğerleri bile çalışırsa gereksiz yere karmaşıktır. JQuery .beforeve .afteryöntemler yapmak istediğiniz şeylerin çoğunu yapar, ancak birçok takas algoritmasının çalışma biçiminde 3. bir öğeye ihtiyacınız vardır. Oldukça basit - bir şeyleri hareket ettirirken yer tutucu olarak geçici bir DOM öğesi yapın. Ebeveynlere veya kardeşlere bakmaya ve kesinlikle klonlamaya gerek yok ...

$.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) tempönce geçici div koymakthis

2) thisönce hareket etthat

3) thatSonra hareket ettemp

3b) kaldır temp

Sonra basitçe

$(selectorA).swapWith(selectorB);

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

İki klona ihtiyacınız yok, biri yapacak. Paolo Bergantino cevabını aldığımızda:

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

Daha hızlı olmalı. İki unsurdan daha küçük olanı geçmek de işleri hızlandırmalıdır.

Daha önce böyle bir teknik kullandım. Http://mybackupbox.com adresindeki bağlayıcı listesi için kullanıyorum

// 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');

Seçilen birden çok seçeneği yukarı veya aşağı taşımanıza izin veren bir işlev yaptım

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

Bağımlılıklar:

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

İlk olarak, ilk / son seçilen seçeneğin yukarı / aşağı hareket edip edemediğini kontrol eder. Sonra tüm elemanlar ve çağrılar arasında dolaşır

swapWith (element.next () veya 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);
}

klonlamadan başka bir tane:

Takas için gerçek ve nominal bir eleman var:

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

o zaman insert <div> beforeve removesonradan sadece ihtiyaç duyulursa, her zaman bir elementin var olduğundan emin olamazsınız (benim durumumda)

"Değiştirilebilir" jQuery eklentisine bir göz atın

http://code.google.com/p/jquery-swapable/

"Sıralanabilir" üzerine kuruludur ve sıralanabilir (sürükle-bırak, yer tutucu vb.) gibi görünür ancak sürüklenen ve bırakılan yalnızca iki öğeyi değiştirir. Diğer tüm öğeler etkilenmez ve mevcut konumlarında kalır.

Bu, @lotif'in cevap mantığına dayanan bir cevaptır , ancak biraz daha genelleştirilmiş

Öğeler taşındıktan sonra / sonrasına ekler / başa eklerseniz
=> klonlamaya gerek yoktur
=> olaylar saklanır

Olabilecek iki durum var

1. Bir hedefte " .prev()ious" => başka bir hedef .after()olabilir.
2. Bir hedef onun ilk çocuğudur .parent()=> .prepend()diğerini ebeveyn olarak yapabiliriz.

KOD

Bu kod daha kısa yapılabilirdi, ancak okunabilirlik için bu şekilde sakladım. Ebeveynleri (gerekiyorsa) ve önceki öğeleri önceden doldurmanın zorunlu olduğunu unutmayın.

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

});

... iç kodu bir fonksiyona sarmaktan çekinmeyin :)

Örnek kemanın olay korumasını göstermek için ek tıklama olayları eklenmiştir ...
Örnek keman: https://jsfiddle.net/ewroodqa/

... çeşitli durumlarda çalışacak - hatta aşağıdakiler gibi:

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

Bu, birden çok alt öğeyi üst öğenin içinde yukarı ve aşağı taşımak için benim çözümüm. Liste kutusundaki seçili seçenekleri taşımak için iyi çalışır ( <select multiple></select>)

Yukarı taşı:

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

Aşağı inmek:

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

JQuery nesnesinde seçilen iki öğeyi değiştirmek istiyorsanız, bu yöntemi kullanabilirsiniz

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

Bir çözüm cadı, ekli olaylarla yan etkisi olduğu için clone () kullanmıyor, işte sonunda ne yaptım

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

birden fazla DOM öğesi içeren jQuery nesneleriyle kullanılmamalıdır

Her öğenin birden fazla kopyası varsa, bir döngüde doğal olarak bir şeyler yapmanız gerekir. Son zamanlarda bu durum vardı. Geçiş yapmak için ihtiyaç duyduğum iki yinelenen öğenin sınıfları ve bir konteyner div vardı:

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

Aşağıdaki kod bana her şeyi yineleme ve tersine izin verdi ...

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

Bu pasajla yaptım

// 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();

Ben kullanılan .after () .before (), veritabanında obj sırasını değiştirmek için bir tablo yaptım, bu yüzden bu ne deney var.

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

Obj2'den önce obj1 eklemek ve

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

tam tersini yapın.

Eğer obj1 obj3'den sonra obj3 ve obj2'den sonra ise ve obj1 ve obj2'yi değiştirmek isterseniz,

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

Bunu yapmak için BTW yapmalısınız .prev () ve .next (), obj3 ve obj4'ü bulmak için zaten bir tür dizine sahip değilseniz kullanabilirsiniz.

nodeA ve nodeB kardeş ise, ikisi <tr>aynıdır <tbody>, bunları kullanabilir $(trA).insertAfter($(trB))veya $(trA).insertBefore($(trB))değiştirebilirsiniz, benim için işe yarıyor. ve daha $(trA).remove()önce aramanıza gerek yoktur , aksi takdirde bazı tıklama etkinliklerini yeniden bağlamanız gerekir$(trA)

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

Bunun gibi bir jQuery işlevi oluşturun

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

Sayesinde Yannick Guinness at https://jsfiddle.net/ARTsinn/TVjnr/

En iyi seçenek onları klon () yöntemiyle klonlamaktır.

Bence bunu çok basit yapabilirsin. Diyelim ki bir sonraki yapınız var: ...

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

ve sonuç olmalı

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

jQuery:

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

Umut ediyorum bu yardım eder!