Javascript get class text inside element

Question

I have a bunch of span4 class elements in my html. they look something like this:

    <div class="span4">
        <div class="widget">
            <div class="header">blablabla</div>
        </div>
    </div>

I want to sort the span4 by that text iside header class.

I do this to sort them

$(".span4").sort(sortAlpha)

but how do I select the text inside the header class?

I'm doing this but I guess there is a better way

    function sortAlphaAsc(a,b){  
        var nomeA = $(a.childNodes[1].childNodes[1]).text();
        var nomeB = $(b.childNodes[1].childNodes[1]).text();
        return a.innerHTML.toLowerCase() > b.innerHTML.toLowerCase() ? 1 : -1;  
    };

there must be a better way than

$(a.childNodes[1].childNodes[1]).text()

You don't use that variables in your return statement, simply remove them :). — Ram
– Ram, Commented Dec 14, 2012 at 16:26

adeneo · Accepted Answer · 2012-12-14 16:39:20Z

3

var elems = $(".span4");

elems.sort(function(a, b) {
    return $(a).find('.header').text().toUpperCase().localeCompare(
         $(b).find('.header').text().toUpperCase()
    );
});

$(".span4").parent().html(elems);

FIDDLE

edited Dec 14, 2012 at 16:39

answered Dec 14, 2012 at 16:27

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

Comments

gpojd · Accepted Answer · 2012-12-14 16:32:50Z

2

Try this:

function sortAlphaAsc(a,b){  
    var nomeA = $(a).find('div.header').text();
    var nomeB = $(b).find('div.header').text();
    return nomeA.toLowerCase() > nomeB.toLowerCase();  
};

edited Dec 14, 2012 at 16:32

answered Dec 14, 2012 at 16:26

gpojd

23.2k8 gold badges45 silver badges71 bronze badges

2 Comments

bozdoz Over a year ago

Also, I think you can get away with losing the ternary: return a.innerHTML.toLowerCase() > b.innerHTML.toLowerCase();

gpojd Over a year ago

@undefined, I just copied the OP's code and fixed the part they were asking about. I corrected it.

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

You could detach the spans, sort and append them. That will be very fast too as changing elements in memory and only updating the DOM once in the end is very efficient.

var $spans = $(".span4").detach();

var sortedSpans = $spans.sort(function(spanA, spanB) {
    var spanTextA = $("div.header", spanA).text();
    var spanTextB = $("div.header", spanB).text();
    
    return spanTextA > spanTextB;
});

$("body").append(sortedSpans);

Obviously instead of body you append it back to it's actual container element.

Or if the spans are in a common container store the parent in cache var $parent = $spans.parent() and in the end simply do $parent.html(sortedSpans).

I don't know your whole mark-up but that should get you started.

DEMO - Detach spans, sort them and append again

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 14, 2012 at 16:38

Nope

22.4k8 gold badges50 silver badges73 bronze badges

1 Comment

andrepcg Over a year ago

like the other solutions, you got what i wanted ;) thanks for the help!

dahliacreative · Accepted Answer · 2012-12-14 16:28:23Z

1

Do you mean something like this:

$('.span4').find('.header').text();

This will return the text inside the header div.

answered Dec 14, 2012 at 16:28

dahliacreative

4413 silver badges14 bronze badges

Collectives™ on Stack Overflow

Javascript get class text inside element

4 Answers 4

Comments

2 Comments

DEMO - Detach spans, sort them and append again

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

DEMO - Detach spans, sort them and append again

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related