Question

我试图在Javascript中按ID排序div。到目前为止，我已经将一系列div分成了＆＃34; leftSlide＆＃34;和＆＃34; rightSlide＆＃34;。我是这样做的：

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，所以他们会这样：

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

......等等。

我注意到＆＃34;右滑＆＃34;中有一个错误的空div。 divs，但它们可能会被忽略，如果没有，我会尝试找到一些逻辑，如果它们是空的，就不要将它们添加到数组中。现在只是试图正确排序。

任何提示？

Answer 1

假设您的幻灯片在左侧和右侧的长度始终相同且排序正确，您可以使用此代码。 请说明您是否还有其他案件！

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的{{1}}，然后通过id数组进行迭代，并将两个数组中的元素推送到一个，先左，然后右。

Answer 2

<强> jsBin demo

如果您从data移除"-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);
}

Answer 3

我没试过这段代码，只是给你一个提示。

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 4

你可以试试。除了$.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 5

您可以尝试这样的事情：

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/

在JavaScript

5 个答案: