Question

Is it possible to sort DIVs, based on value from the form the DIV contains?

Hare is the HTML, to better get a visual idea how the HTML looks like

http://jsfiddle.net/littlesandra88/gtYBE/1/

Here is the HTML simplified to illustrate the problem:

<div id="contentEdit">
  <div class="row">
    <div class="cellHeader"> ID    </div>
    <div class="cellHeader"> Title </div>
  </div>

  <div id="content">

    <div id="127">
      <form action="" method="post">
    <div class="row">
          <!-- ----- cell one -----              -------------------------- cell two ----------------------- -->
      <div class="cell"> 127 </div>   <div class="cell"> <input name="title" value="dfg" type="text" /> </div>
    </div>
      </form>
    </div>

    <!-- next row -->

    <div id="27">
      <form action="" method="post">
    <div class="row">
      <div class="cell"> 27 </div>   <div class="cell"> <input name="title" value="afg" type="text" /> </div>
    </div>
      </form>
    </div>

  </div>
</div>

What I would like is to be able to click on a button to sort each row i.e. <div id="127"> and <div id="27"> based on the content of <div class="cell"> 127 </div>, (the content is here 127).

Another button should sort the rows based on form value.

Is that possible?

Answer 1

Here is is an example of sorting by the id: http://jsfiddle.net/ryanrolds/CuJ9T/

The above example doesn’t require jQuery. It’s not a drop in solution for your exact problem but it should give a very good idea how to solve your current problem.