CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Si8
Si8

Reputation: 9225

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

The left/right arrow is working fine but how can I also modify the script so when a letter is clicked the first instance of the DIV which represents the letter is the first child and if it wasn't the first child anything before it should append to the end.

So e.g. in the fiddle: If I click N, div with the text Nine should be the first child and div(s) with the text Eleven, Five, Four should append to the end in their respective order and so forth.

Upvotes: 1

Views: 160

Answers (2)

Parvez Rahaman
Parvez Rahaman

Reputation: 4387

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

Upvotes: 1

ZPiDER
ZPiDER

Reputation: 4412

  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

Upvotes: 2

Related Questions