Question

following is my html structure:

<div class="qotd">
    <div class="inner">
                <p id="19001"><span>text1</span>

                  <br>
                  <span class="uptext">1</span>
                  <img class="im upimg" src="http://www.deratus.com/pictures/2010/02/Up-championed-to-win-oscar.jpg">
                  <img class="im downimg" src="http://www.freeclipartnow.com/d/40224-1/arrow-blue-rounded-down.jpg">
                  <span class="downtext">2</span>
                </p>
            </div>
</div>

the above structure is repeated 8 times with different numbers.

i have ahref tags acting as buttons to sort the p based on the uptext and downtext

<a href="#" id="pos" class="btn">Sort by upvotes</a>
    <br /> <br />
          <a href="#" id="neg" class="btn">Sort by downvotes</a>
    <br /> <br />

i wrote the following jquery to sort the paragraphs based on their upvotes or downvotes:

$(function){
$("#pos").click(function(e) {
    console.log("up");
        e.preventDefault();
        $('.inner').sort(function(a, b) {

            return parseInt($('.uptext', b).text(), 10) - parseInt($('.uptext', a).text(), 10) ;
        }).appendTo('div.qotd');
    });

    $("#neg").click(function(e) {
      console.log("down");
        e.preventDefault();
        $('.inner').sort(function(a, b) {
            return parseInt($('downtext', b).text(), 10) - parseInt($('.downtext', a).text(), 10);
        }).appendTo('div.qotd');
    });
}

The jsfiddle is here
Despite all the above i do not get the correct result, where am i going wrong?

Answer 1

You had a typo in your $(function() { .ready handler and in one of your .downtext selectors. I fixed the sorting algo slightly into

return +$(b).find('.uptext').text() - +$(a).find('.uptext').text();

See http://jsfiddle.net/Escf3/3/

It is still a kinda questionable operation tho. You’re doing a lot of queries/DOM crawling each time you call those sorting functions + jQuery overhead.