sorting elements in dom based on text through javascript/jquery

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?

what result do you get, is it sorted in the wrong order, or is there an error thrown? — driangle
– driangle, Commented Feb 6, 2012 at 17:31
@user902620 Your jsfiddle throws an error that stops it from running. Check your developer console to see the error. — Jasper
– Jasper, Commented Feb 6, 2012 at 17:36
$('downtext', b).text() should be $('.downtext', b).text()... then it works. — Felix Kling
– Felix Kling, Commented Feb 6, 2012 at 17:50

jAndy · Accepted Answer · 2012-02-06 17:53:06Z

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.

edited Feb 6, 2012 at 17:53

answered Feb 6, 2012 at 17:47

jAndy

237k57 gold badges313 silver badges363 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

whatf Over a year ago

could you please explain the - + thing, i could not understand, how this sort and selector is actually working.

whatf Over a year ago

and whats wrong with using: return parseInt($('.uptext', b).text(), 10) - parseInt($('.uptext', a).text(), 10) ;

Felix Kling Over a year ago

@user902620: See here. It's just a shorter way of writing it. $(a, b) calls $(b).find(a) internally, so it is often preferred to use this form directly.

jAndy Over a year ago

@user902620: there is nothing wrong with using parseInt(), but its kinda verbose and slow'ish for your purpose here. + will "cast" a string into its numerical version (if we are dealing with a number) otherwise it returns NaN.

Collectives™ on Stack Overflow

sorting elements in dom based on text through javascript/jquery

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related