Diyelim ki <div>bir sayfada üç öğem var . Birinci ve üçüncü pozisyonları nasıl değiştirebilirim <div>? jQuery iyi.

JQuery ile önemsiz

$('#div1').insertAfter('#div3');
$('#div3').insertBefore('#div2');

Tekrar tekrar yapmak istiyorsanız, div'ler hareket ettikçe kimliklerini koruyacağından farklı seçiciler kullanmanız gerekir.

$(function() {
    setInterval( function() {
        $('div:first').insertAfter($('div').eq(2));
        $('div').eq(1).insertBefore('div:first');
    }, 3000 );
});

Böylesine önemsiz bir görev için kitaplık kullanmaya gerek yok:

var divs = document.getElementsByTagName("div");   // order: first, second, third
divs[2].parentNode.insertBefore(divs[2], divs[0]); // order: third, first, second
divs[2].parentNode.insertBefore(divs[2], divs[1]); // order: third, second, first

Bu, getElementsByTagNameDOM'daki öğelerin işlenirken sırasını yansıtmak için otomatik olarak güncellenen canlı bir DüğümListesi döndüren gerçeğini hesaba katar .

Ayrıca şunları da kullanabilirsiniz:

var divs = document.getElementsByTagName("div");   // order: first, second, third
divs[0].parentNode.appendChild(divs[0]);           // order: second, third, first
divs[1].parentNode.insertBefore(divs[0], divs[1]); // order: third, second, first

ve denemek istiyorsanız, başka olası permütasyonlar da vardır:

divs[0].parentNode.appendChild(divs[0].parentNode.replaceChild(divs[2], divs[0]));

Örneğin :-)

.önce ve sonra

Modern vanilya JS'yi kullanın! Öncekinden çok daha iyi / daha temiz. Ebeveyne başvurmaya gerek yok.

const div1 = document.getElementById("div1");
const div2 = document.getElementById("div2");
const div3 = document.getElementById("div3");

div2.after(div1);
div2.before(div3);

Tarayıcı Desteği - Temmuz '20 itibarıyla% 94,23 Global

jQuery.fn.swap = function(b){ 
    b = jQuery(b)[0]; 
    var a = this[0]; 
    var t = a.parentNode.insertBefore(document.createTextNode(''), a); 
    b.parentNode.insertBefore(a, b); 
    t.parentNode.insertBefore(b, t); 
    t.parentNode.removeChild(t); 
    return this; 
};

ve şu şekilde kullanın:

$('#div1').swap('#div2');

jQuery kullanmak istemiyorsanız, işlevi kolayca uyarlayabilirsiniz.

var swap = function () {
    var divs = document.getElementsByTagName('div');
    var div1 = divs[0];
    var div2 = divs[1];
    var div3 = divs[2];

    div3.parentNode.insertBefore(div1, div3);
    div1.parentNode.insertBefore(div3, div2);
};

Bu işlev tuhaf görünebilir, ancak düzgün çalışması için büyük ölçüde standartlara dayanır. Aslında, takas işlemini yalnızca iki kez yapıyor gibi görünen tvanfosson'un yayınladığı jQuery sürümünden daha iyi çalışıyor gibi görünebilir .

Hangi standartlara güveniyor?

insertBefore Varolan refChild alt düğümünden önce newChild düğümünü ekler. RefChild null ise, alt öğe listesinin sonuna newChild ekleyin. NewChild bir DocumentFragment nesnesiyse, tüm alt öğeleri refChild'den önce aynı sırayla eklenir. NewChild zaten ağaçtaysa, önce kaldırılır.

Üstte bahsedilen jquery yaklaşımı işe yarayacaktır. Ayrıca JQuery ve CSS'yi de kullanabilirsiniz. Örneğin Div one'a class1 ve div2'yi uyguladığınızı söyleyin class2'yi uyguladınız (örneğin, her css sınıfı tarayıcıda belirli bir konum sağlar), şimdi sınıfları jquery veya javascript (konumu değiştirecek)

Bu ileti dizisini çarptığım için özür dilerim, "DOM öğelerini takas etme" sorunuyla karşılaştım ve biraz oynadım

Sonuç, gerçekten güzel görünen bir jQuery-native "çözümdür" (maalesef, bunu yaparken jQuery dahililerinde ne olduğunu bilmiyorum)

Kod:

$('#element1').insertAfter($('#element2'));

JQuery belgeleri , öğeyi insertAfter() hareket ettirdiğini ve klonlamadığını söylüyor