javascript - 如何使某个 DIV 成为第一个 child 以及它附加到末尾之前的任何内容

Question

fiddle :https://jsfiddle.net/xkdm52gs/3/

J查询:

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

左/右箭头工作正常，但我怎样才能修改脚本，所以当一个字母被点击时，代表该字母的 DIV 的第一个实例是第一个 child ，如果它不是第一个 child 之前的任何东西它应该附加到最后。

例如在 fiddle 中:如果我单击 N，带有文本 Nine 的 div 应该是第一个子元素，而带有文本 11 的 div， Five、Four 应按各自的顺序附加到末尾，依此类推。

Answer 1

1. 看看 jQuery 前置。
2. 我认为您最好为您的选择器使用滚动 (overflow-x: scroll)，这将消除对您的 dom 重新排序的需要。
3. flexbox 也是动态重新排序的更好解决方案