Сортировка divs по ID в JavaScript

Question

Я пытаюсь сортировать divs по ID в Javascript. Пока у меня есть массив divs, разделенных на «leftSlide» и «rightSlide». Я делаю это так:

var leftSlides = []; 
    var rightSlides = []; 
    $(".ms-left").find("div").each(function(){ leftSlides.push(this.id); }); 
    $(".ms-right").find("div").each(function(){ rightSlides.push(this.id); }); 

И мой выход консоли:

// Left Divs 
["slide0", "slide1", "slide2", "slide3", "slide4", "slide5", "slide6", "slide7", "slide8", "slide9", "slide10"] 

// Right Divs 
["slide-right0", "", "slide-right1", "", "slide-right2", "", "slide-right3", "", "slide-right4", "", "slide-right5", "", "slide-right6", "", "slide-right7", "", "slide-right8", "", "slide-right9", "", "slide-right10", ""] 

Теперь я хочу, чтобы изменить порядок мои дивы поэтому они идут что-то вроде этого:

<div id="slide0"></div> 
<div id="slide-right0"></div> 
<div id="slide1"></div> 
<div id="slide-right1"></div> 
<div id="slide2"></div> 
<div id="slide-right2"></div> 

... и прочее.

Я замечаю, что в div «слайд-право» есть ошибочный пустой div, но, вероятно, нормально их игнорировать, а если нет, я попытаюсь найти некоторую логику, чтобы не добавлять их в массив если они пусты. Сейчас просто пытаюсь правильно сортировать.

Любые советы?

Answer 1

Вы можете попробовать. Я не использовал никакой специальной функции, кроме $.insertBefore для перемещения элементов по мере необходимости.

for(var x=0; x < $('div').length; x++) 
{ 
    for(var i=0; i < $('div').length; i++) 
    { 
    if((i+1) < $('div').length) 
     CompareDivs($('div')[i], $('div')[i+1]); 
    } 
} 

function CompareDivs(curr,next) 
{ 
    var curr_idNum = $(curr).attr("id").substring($(curr).attr("id").length - 1,$(curr).attr("id").length); 
    var next_idNum = $(next).attr("id").substring($(next).attr("id").length - 1,$(next).attr("id").length); 
    if(curr_idNum > next_idNum) 
    {  
    $(next).insertBefore($(curr)); 
    } 
} 

Рабочий пример: https://jsfiddle.net/DinoMyte/3h78pjkh/1/

Answer 2

Вы могли бы попробовать что-то вроде этого:

var leftSlides = []; 
var rightSlides = []; 
$(".ms-left").find("div").each(function(){ leftSlides.push(this); }); 
$(".ms-right").find("div").each(function(){ rightSlides.push(this); }); 

$all = $(".all"); 
for (var i=0; i<leftSlides.length; i++) { 
    $all.append(leftSlides[i]); 
    $all.append(rightSlides[i*2]); 
} 

https://jsfiddle.net/edoLtp1h/

Answer 3

Предполагая, что слайды всегда будет иметь ту же длину, на левой стороне и правой и правильно упорядочены, вы можете использовать этот код. Просьба указать, может ли быть любой другой случай!

var leftSlides = []; 
    var rightSlides = []; 
    $(".ms-left").find("div[id]").each(function(){ leftSlides.push(this); }); 
    $(".ms-right").find("div[id]").each(function(){ rightSlides.push(this); }); 

    $all = $(".all"); 
    for (var i=0; i<leftSlides.length; i++) { 
     $all.append(leftSlides[i]); 
     $all.append(rightSlides[i]); 
    } 

Этот код выбирает только divs с id, а затем итерацию корыта leftSlides массив и выталкивает элементы из обоих массивов в один, первый поворот налево затем направо.

Answer 4

Я не пробовал этот код, просто дайте вам подсказку.

var leftSlides = []; 
var rightSlides = []; 
$(".ms-left").find("div").each(function(){ leftSlides.push(this.id); }); 
$(".ms-right").find("div").each(function(){ rightSlides.push(this.id); }); 
$('#yourNewWrapper').html(function(){ 
    var allLeft = $('.ms-left').find('div'); 
    var allRight = $('.ms-right').find('div'); 
    var longLength = allLeft.length > allRight.length ? allLeft.length : allRight.length; 
    var divHtmlCache = []; 
    for(var i = 0; i < longLength; i++){ 
     var eachLeft = allLeft.eq(i).length ? allLeft.eq(i) : null; 
     var eachRight = allRight.eq(i).length ? allRight(i) : null; 
     divHtmlCache.push(eachLeft ? eachLeft.html() : ''); 
     divHtmlCache.push(eachRight ? eachRight.html() : ''); 
    } 
    return divHtmlCache.join(''); 
}); 

Answer 5

jsBin demo

если вы удалите "-right" из "slide-right0" вы получите подходящую пару "slide0":

$(".ms-right").find("div").prop("id", function(i, id){ 
 
    $("#"+ id.replace("-right","")).after(this); 
 
}).end().remove(); // After all is moved remove the .ms-right element.

div{ 
 
    padding:5px; margin:5px; 
 
    background:rgba(255,0,0,0.2); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="ms-left"> 
 
    <div id="slide0">0</div> 
 
    <div id="slide1">1</div> 
 
    <div id="slide2">2</div> 
 
    <div id="slide3">3</div> 
 
    <div id="slide4">4</div> 
 
    <div id="slide13">13</div> 
 
</div> 
 

 
<div class="ms-right"> 
 
    <div id="slide-right0">r0</div> 
 
    <div>no ID</div> 
 
    <div id="slide-right1">r1</div> 
 
    <div>no ID</div> 
 
    <div id="slide-right2">r2</div> 
 
    <div>no ID</div> 
 
    <div id="slide-right3">r3</div> 
 
    <div>no ID</div> 
 
    <div id="slide-right4">r4</div> 
 
    <div>no ID</div> 
 
    <div id="slide-right13">r13</div> 
 
</div>