Javascript 如何使某个DIV成为第一个子项，以及在它附加到末尾之前的任何内容

小提琴：

Jquery：

$(function() {
var vhtml = "";
var u5 = new Array();
var $divs = $(".cHold");
var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
        return $(a).find("span").text() > $(b).find("span").text();
        });
$(".dCon").html(alphabeticallyOrderedDivs);
    $("#arrow-left").click(function() {
    //alert("left");
    $(".dCon div:first-child").appendTo(".dCon");
    $(".dCon").remove(".dCon div:first-child");
  });
  $("#arrow-right").click(function() {
    //alert("right");
    $(".dCon div:last-child").prependTo(".dCon");
    $(".dCon").remove(".dCon div:last-child");
  });

  $(".cHold").each(function() {
    var k = $(this).text().trim();
    console.log(k.charAt(0));
    u5.push(k.charAt(0));
  });
  console.log(unique(u5).length);
  u5 = unique(u5).sort();
  for (var k = 0; k < u5.length; k++) {
    vhtml += "<a class='aLink' href='javascript:void(0);'>" + u5[k] + "</a>";
  }
  $(".theLetNum").html(vhtml);
});

function unique(list) {
    var result = [];
    $.each(list, function(i, e) {
        if ($.inArray(e, result) == -1) result.push(e);
    });
    return result;
}

$（函数（）{
var vhtml=“”；
var u5=新数组（）；
变量$divs=$（“.cHold”）；
var alphamocallyordereddivs=$divs.sort（函数（a，b）{
返回$（a）.find（“span”）.text（）>$（b）.find（“span”）.text（）；
});
$（“.dCon”）.html（按字母顺序排列）；
$（“#向左箭头”）。单击（函数（）{
//警惕（“左”）；
$（“.dCon div:first child”）.appendTo（“.dCon”）；
$（“.dCon”）.remove（“.dCon div:first child”）；
});
$（“#向右箭头”）。单击（函数（）{
//警惕（“右”）；
$（“.dCon div:last child”）.prependTo（“.dCon”）；
$（“.dCon”）.remove（“.dCon div:last child”）；
});
$（“.cHold”）。每个（函数（）{
var k=$（this.text（）.trim（）；
console.log（k.charAt（0））；
u5.推力（k.charAt（0））；
});
console.log（唯一（u5.length）；
u5=唯一（u5.sort（）；
对于（var k=0；k

左/右箭头工作正常，但如何修改脚本，以便在单击字母时，表示该字母的DIV的第一个实例是第一个子项，如果它不是第一个子项，则应在其结尾追加任何内容

例如，在小提琴中：如果我单击

N

，文本为

9

的div应该是第一个孩子，文本为

11

，

5

，

4

的div应该按照各自的顺序追加到末尾，以此类推

看看jQuery prepend

我认为最好使用滚动（overflow-x:scroll）作为选择器，这样就不需要对dom进行重新排序

flexbox也是动态重新排序的更好解决方案

---

将此事件附在信函上。运行e示例查看它

$(document).on('click', '.aLink', function() {
    var char = $(this).text();
    $elem = $('span').filter(function() {
        return $(this).text().charAt(0) == char;
    }).parent().remove();
    $('.dCon').prepend($elem);
})

$（函数（）{
var vhtml=“”；
var u5=新数组（）；
变量$divs=$（“.cHold”）；
var alphamocallyordereddivs=$divs.sort（函数（a，b）{
返回$（a）.find（“span”）.text（）>$（b）.find（“span”）.text（）；
});
$（“.dCon”）.html（按字母顺序排列）；
$（“#向左箭头”）。单击（函数（）{
//警惕（“左”）；
$（“.dCon div:first child”）.appendTo（“.dCon”）；
$（“.dCon”）.remove（“.dCon div:first child”）；
});
$（“#向右箭头”）。单击（函数（）{
//警惕（“右”）；
$（“.dCon div:last child”）.prependTo（“.dCon”）；
$（“.dCon”）.remove（“.dCon div:last child”）；
});
$（“.cHold”）。每个（函数（）{
var k=$（this.text（）.trim（）；
console.log（k.charAt（0））；
u5.推力（k.charAt（0））；
});
console.log（唯一（u5.length）；
u5=唯一（u5.sort（）；
对于（var k=0；k

*{
填充：0；
保证金：0；
}
.dvSli{
/*Permalink-用于编辑和共享此渐变：http://colorzilla.com/gradient-editor/#ffffff+0，ffffff+50，ffffff+100和1+0,0+25,0+50,0+75,1+100*/
背景：-moz线性梯度（左，rgba（255，255，255，1）0%，rgba（255，255，255，0）25%，rgba（255，255，255，0）50%，rgba（255，255，255，0）75%，rgba（255，255，255，1）100%）；
/*FF3.6-15*/
背景：-webkit线性梯度（左，rgba（255，255，255，1）0%，rgba（255，255，255，0）25%，rgba（255，255，255，0）50%，rgba（255，255，255，0）75%，rgba（255，255，255，1）100%）；
/*铬10-25，Safari5.1-6*/
背景：线性梯度（向右，rgba（255，255，255，1）0%，rgba（255，255，255，0）25%，rgba（255，255，255，0）50%，rgba（255，255，255，0）75%，rgba（255，255，255，1）100%）；
/*W3C、IE10+、FF16+、Chrome26+、Opera12+、Safari7+*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#ffffff'，endColorstr='#ffffff'，GradientType=1）；
/*IE6-9*/
}
#向左箭头{
位置：相对位置；
填充：30px；
光标：指针；
}
#向左箭头：之前{
内容：''；
位置：绝对位置；
排名：0；
左：0；
高度：45px；
宽度：15px；
背景：红色；
-webkit变换：倾斜（135度，0度）；
-moz变换：倾斜（135度，0度）；
-ms变换：倾斜（135度，0度）；
-o变换：倾斜（135度，0度）；
变换：倾斜（135度，0度）；
}
#向左箭头：之后{
内容：''；
位置：绝对位置；
顶部：45px；
右：45px；
高度：45px；
宽度：15px；
背景：红色；
-webkit变换：倾斜（-135度，0度）；
-moz变换：倾斜（-135度，0度）；
-ms变换：倾斜（-135度，0度）；
-o变换：倾斜（-135度，0度）；
变换：倾斜（-135度，0度）；
}
#向右箭头{
位置：相对位置；
填充：30px；
光标：指针；
}
#向右箭头：之前{
内容：''；
位置：绝对位置；
排名：0；
左：0；
高度：45px；
宽度：15px；
背景：红色；
-webkit变换：倾斜（45度，0度）；
-moz变换：倾斜（45度，0度）；
-ms变换：倾斜（45度，0度）；
-o变换：倾斜（45度，0度）；
变换：倾斜（45度，0度）；
}
#向右箭头：之后{
内容：''；
位置：绝对位置；
顶部：45px；
右：45px；
高度：45px；
宽度：15px；
背景：红色；
-webkit变换：倾斜（-45度，0度）；
-moz变换：倾斜（-45度，0度）；
-ms变换：倾斜（-45度，0度）；
-o变换：倾斜（-45度，0度）；
变换：倾斜（-45度，0度）；
}
乔尔德先生{
保证金：0.2px 0.2px；
}
阿林克先生{
填充：5px10px 5px10px；
}

一个
两个
三
四
五
六
七
八