title: changing position up and down in list through jquery, javascript
body: <p>I am working on a list that changes position according to the button clicked.Here is a unordered list i had created and have contents like this</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;
          &lt;div&gt;
              &lt;span&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;cat3_sub3&lt;/span&gt;
              &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
              &lt;div style="text-align:right;float:right;"&gt;
                  [ &lt;a href="#" class="up_sub" id="3_3"&gt;Up&lt;/a&gt; ] 
                  [ &lt;a href="#" class="down_sub" id="3_3"&gt;Down&lt;/a&gt; ]
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;div&gt;
              &lt;span&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;cat3_sub2&lt;/span&gt;
              &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
              &lt;div style="text-align:right;float:right;"&gt;
                  [ &lt;a href="#" class="up_sub" id="2_3"&gt;Up&lt;/a&gt; ] 
                  [ &lt;a href="#" class="down_sub" id="2_3"&gt;Down&lt;/a&gt; ]
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;div&gt;
              &lt;span&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;cat3_sub2&lt;/span&gt;
              &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
              &lt;div style="text-align:right;float:right;"&gt;
                  [ &lt;a href="#" class="up_sub" id="1_3"&gt;Up&lt;/a&gt; ] 
                  [ &lt;a href="#" class="down_sub" id="1_3"&gt;Down&lt;/a&gt; ]
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>now i want to change the list up or down as teh up or down link is clicked. so for this i wrote a javascript like this</p>
  
  <pre><code>$(document).ready(function(){
  $(".up_sub,.down_sub").click(function(){
      var rank_id = this.id;
      rank_id = rank_id.split("_");
      var rank = (rank_id[0]);
      var cat_id = rank_id[1];
      var max_rank = get_max_rank(cat_id);
      if ($(this).is(".up_sub")) {
          if(rank!=max_rank){                                 //to not to move up than top most
              var thisLine = $(this).parent();
              var prevLine = thisLine.prev();
              prevLine.before(thisLine);
          }
      }
      });
  });
  </code></pre>
  
  <p>but this didn't worked. i checked if it reaches inside the function using <code>alert()</code>. it gave response. But the list are not changing their position. what is the reason behind this. and what should be done to change the list position?</p>