CODEWITHSUNDEEP
jquery
KoyaCho
KoyaCho

Reputation: 155

jQuery rearrange <li> in <ol>?

I'm trying to rearrange my list when a button is clicked, where the first one moves last, second moves fourth, third stays third and fifth moves first, it doesn't seem to take any effect, even the console is not showing anything.

$(document).ready(function() {
  $("#rearranage").click(function() {

    $.fn.orderChildren = function(order) {
      this.each(function() {
        var el = $(this);
        for (var i = order.length; i >= 0; i--) {
          el.prepend(el.children(order[i]));
        }
      });
      return this;
    };



    $(".lists").orderChildren([
      "#fifth",
      "#fourth",
      "#third",
      "#second",
      "first"
    ]);

  });

});
<div class="hyperlinks">
  <ol class="lists">
    <li><a id="first" href="http://www.google.com">this</a></li>
    <li><a id="second" href="http://www.google.com">is</a></li>
    <li><a id="third" href="http://www.google.com">a</a></li>
    <li><a id="fourth" href="http://www.google.com">test</a></li>
    <li><a id="fifth" href="http://www.google.com">!</a></li>
</div>
</ol>
<button class="button" id="rearrange">rearrange this!</button>

Upvotes: 1

Views: 477

Answers (3)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

There was some minor typos:

  1. $("#rearranage").click(function() { => extra a
  2. "first" => missing #
  3. </div> was inside the ol.

Then, no need for an each loop.
The for loop is enought.

Now you have to target the right element to prepend, which is the anchor's parent (li).

$(document).ready(function() {
  $("#rearrange").click(function() {

    $(".lists").orderChildren([
      "#fifth",
      "#fourth",
      "#third",
      "#second",
      "#first"
    ]);
  });

  $.fn.orderChildren = function(order) {

    var el = $(this);
    for(i=order.length;i>=0;i--){
      el.prepend( $(order[i]).parent() );   // Target the anchor's parent element.
    }
  };

}); // ready
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="hyperlinks">
  <ol class="lists">
    <li><a id="first" href="http://www.google.com">this</a></li>
    <li><a id="second" href="http://www.google.com">is</a></li>
    <li><a id="third" href="http://www.google.com">a</a></li>
    <li><a id="fourth" href="http://www.google.com">test</a></li>
    <li><a id="fifth" href="http://www.google.com">!</a></li>
  </ol>
</div>

<button class="button" id="rearrange">Rearrange this!</button>

Upvotes: 0

H77
H77

Reputation: 5967

The child id's need to be set to the li element instead of the anchors. That and a few other typo fixes gets your code working.

 $("#rearrange").click(function() {

    $.fn.orderChildren = function(order) {
      this.each(function() {
        var el = $(this);
        for (var i = order.length; i >= 0; i--) {
          el.prepend(el.children(order[i]));
        }
      });
      return this;
    };



    $(".lists").orderChildren([
      "#fifth",
      "#fourth",
      "#third",
      "#second",
      "#first"
    ]);

  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hyperlinks">
  <ol class="lists">
    <li id="first"><a href="http://www.google.com">this</a></li>
    <li id="second"><a href="http://www.google.com">is</a></li>
    <li id="third"><a href="http://www.google.com">a</a></li>
    <li id="fourth"><a href="http://www.google.com">test</a></li>
    <li id="fifth"><a href="http://www.google.com">!</a></li>
  </ol>
</div>
<button class="button" id="rearrange">rearrange this!</button>

Upvotes: 0

mjw
mjw

Reputation: 1206

I made a fiddle for you: https://jsfiddle.net/6qoq3zrv/

HTML:

<div class="hyperlinks">
  <ol class="lists">
    <li class="block-item"><a id="first" href="http://www.google.com">this</a></li>
    <li class="block-item"><a id="second" href="http://www.google.com">is</a></li>
    <li class="block-item"><a id="third" href="http://www.google.com">a</a></li>
    <li class="block-item"><a id="fourth" href="http://www.google.com">test</a></li>
    <li class="block-item"><a id="fifth" href="http://www.google.com">!</a></li>
  </ol>
</div>
<input type="submit" id="rearrange">

JS:

$(document).ready(function(){
 $("#rearrange").click(function(){  
   $($(".block-item").get().reverse()).each(function() {
     $(this).appendTo($(this).parent());
   });
  });
});

Your hyperlinks will now be reversed when the rearrange button is clicked.

Upvotes: 1

Related Questions