How To Make A Certain Div First Child And Anything Before It Append To The End

Fiddle: https://jsfiddle.net/xkdm52gs/3/ Jquery: $(function() { var vhtml = ''; var u5 = new Array(); var $divs = $('.cHold'); var alphabeticallyOrderedDivs = $divs.sort(function (

Solution 1:

1. have a look at jQuery prepend.
2. i think you would be better off using scrolling (overflow-x: scroll) for your selector, that will eliminate the need to reorder your dom.
3. flexbox is also a better solution for dynamic reordering

Solution 2:

Attach this event on the letters. See the emaple by running it.

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

$(function() {
  var vhtml = "";
  var u5 = newArray();
  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);
  $(document).on('click', '.aLink', function() {
    var char = $(this).text();
    $elem = $('span').filter(function() {
      return $(this).text().charAt(0) == char;
    }).parent().remove();
    $('.dCon').prepend($elem);
  })
});

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

* {
  padding: 0;
  margin: 0;
}
.dvSli {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+50,ffffff+100&1+0,0+25,0+50,0+75,1+100 */background: -moz-linear-gradient(left, 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 */background: -webkit-linear-gradient(left, 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%);
  /* Chrome10-25,Safari5.1-6 */background: linear-gradient(to right, 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+ */filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1);
  /* IE6-9 */
}
#arrow-left {
  position: relative;
  padding: 30px;
  cursor: pointer;
}
#arrow-left:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 45px;
  width: 15px;
  background: red;
  -webkit-transform: skew(135deg, 0deg);
  -moz-transform: skew(135deg, 0deg);
  -ms-transform: skew(135deg, 0deg);
  -o-transform: skew(135deg, 0deg);
  transform: skew(135deg, 0deg);
}
#arrow-left:after {
  content: '';
  position: absolute;
  top: 45px;
  right: 45px;
  height: 45px;
  width: 15px;
  background: red;
  -webkit-transform: skew(-135deg, 0deg);
  -moz-transform: skew(-135deg, 0deg);
  -ms-transform: skew(-135deg, 0deg);
  -o-transform: skew(-135deg, 0deg);
  transform: skew(-135deg, 0deg);
}
#arrow-right {
  position: relative;
  padding: 30px;
  cursor: pointer;
}
#arrow-right:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 45px;
  width: 15px;
  background: red;
  -webkit-transform: skew(45deg, 0deg);
  -moz-transform: skew(45deg, 0deg);
  -ms-transform: skew(45deg, 0deg);
  -o-transform: skew(45deg, 0deg);
  transform: skew(45deg, 0deg);
}
#arrow-right:after {
  content: '';
  position: absolute;
  top: 45px;
  right: 45px;
  height: 45px;
  width: 15px;
  background: red;
  -webkit-transform: skew(-45deg, 0deg);
  -moz-transform: skew(-45deg, 0deg);
  -ms-transform: skew(-45deg, 0deg);
  -o-transform: skew(-45deg, 0deg);
  transform: skew(-45deg, 0deg);
}
.cHold {
  margin: 02px02px;
}
.aLink {
  padding: 5px10px5px10px;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divstyle="overflow: hidden; width: 100%; position: relative; height: 165px; background: #00AC00;"><divclass="dvSli"style="width: 100%; height: 100%; overflow: hidden; position: absolute; z-index: 4;"></div><divstyle="overflow: visible; position: absolute; left: 2%; top: 75px; z-index: 10; padding: 10px;"><spanid="arrow-left"></span></div><divstyle="overflow: visible; position: absolute; right: 0; top: 75px; z-index: 10;"><spanid="arrow-right"></span></div><divclass="theLetNum"style="overflow: hidden; height: 40px; width: 100%; text-align: center; position: relative; z-index: 5;"></div><divclass="dCon"style="overflow: auto; width: 6000000%; height: 125px;"><divclass="cHold"style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;"><span>ONE</span></div><divclass="cHold"style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;"><span>TWO</span></div><divclass="cHold"style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;"><span>THREE</span></div><divclass="cHold"style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;"><span>FOUR</span></div><divclass="cHold"style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;"><span>FIVE</span></div><divclass="cHold"style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;"><span>SIX</span></div><divclass="cHold"style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;"><span>SEVEN</span></div><divclass="cHold"style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;"><span>EIGHT</span></div><divclass="cHold"style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;"><span>NINE</span></div><divclass="cHold"style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;"><span>TEN</span></div></div></div>