Geek Answers Handbook

Sort sibling <div> s using jQuery

I hit my head on a problem that has more to do with second-class math than programming. Here: four elements <div>are placed one after another horizontally. When you click one, the script puts it in front. You press another, and also place in front, etc. You get an image. Now I would like to sort the remaining elements <div>(all but the first) using the original order.

Perhaps this picture will clarify the situation:

enter image description here

After step №3 Cshould be placed after B, so it should look like this: D A B C.

Here is a sample code:

<html>
  <head>
    <title>mixit</title>
    <style type="text/css">
      .insidebox{
      width: 50px;
      height: 50px;
      line-height: 50px;
      margin: 0 0 0 20px;
      text-align: center;
      float: left;
      border: black solid 3px;
      font-family: sans-serif;
      cursor: pointer;
      }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
    <script type="text/javascript">

    </script>
  </head>
  <body>
    <div id="container">
      <div id="a" class="insidebox">A</div>
      <div id="b" class="insidebox">B</div>
      <div id="c" class="insidebox">C</div>
      <div id="d" class="insidebox">D</div>
    </div>
  </body>
</html>

, , .insertAfter() , ? - , . .

+5
3

, .

var $initial = $('.insidebox');
$('.insidebox').click(function(){
    var $this = $(this);

    $this.parent()
         .prepend($this)
         .append( $initial.not(this) );
});

( )

demo http://jsfiddle.net/gaby/Dyafx/

.. . , .

var $initial = $('.insidebox');
$('.insidebox').click(function(){
    $(this).parent()
         .append( $initial.not(this) );
});

demo http://jsfiddle.net/gaby/Dyafx/1/

+5

. - (A) 1 ..

+1

:

$(document).ready(function(){
    $("#container div").click(function(){
       $(this).prependTo($(this).parent());
    });
});

.

0

More articles:


All Articles