jQuery getting element by class name with one of two classes in a variable

Question

Not sure how to word this question... I have a script that does an each loop for every nth element.
I have this as a variable: var nthCard = $('.card:nth-child(' + col + 'n+' + i + ')'); then I do a .each with it nthCard.each(function(i){...}

After the each, I need to find out how many of nthCards have the class .featured.

The html is set up like so:

<div class="card"></div>
<div class="card featured"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card featured"></div>

Assuming this is the each statement, I need to find how many of these cards are also featured.

I tried something like this: console.log(nthCard.find('.featured').length); and also console.log(nthCard.hasClass('.featured').length); but the former returns 0 and the later returns undefined.

Here's the truncated code:

function placeCard(col){
    var i = 0;
    for(i=1; i<= col; i++){
        var nthCard = $('.card:nth-child(' + col + 'n+' + i + ')');
        nthCard.each(function(idx){
            //do some code
        });
        console.log(nthCard.find('.featured').length);//I need to return the number of featured cards here.
    }
}

Blender · Accepted Answer · 2013-05-15 23:40:34Z

4

filter the matched elements:

var number = nthCard.filter('.featured').length;

answered May 15, 2013 at 23:40

Blender

300k55 gold badges462 silver badges511 bronze badges

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

1 Comment

ntgCleaner Over a year ago

Good ol' filter. I always forget about that one. Thank you, this was what I was looking for. I will accept in less than 10 minutes (when it allows me to.)

DeweyOx · Accepted Answer · 2013-05-15 23:40:48Z

1

Try:

console.log(nthCard.hasClass('featured'));

answered May 15, 2013 at 23:40

DeweyOx

7195 silver badges15 bronze badges

2 Comments

Blender Over a year ago

hasClass returns true or false

ntgCleaner Over a year ago

Thanks, but I am trying to find the number of those 'featured' cards.

rjmunro · Accepted Answer · 2013-05-15 23:54:59Z

1

Why not count them while you are in the each loop?

function placeCard(col){
    var i = 0;
    for(i=1; i<= col; i++){
        var nthCard = $('.card:nth-child(' + col + 'n+' + i + ')');
        var count = 0;
        nthCard.each(function(idx, card){
            //do some code
            if ($(card).hasClass('featured')) {
                count += 1;
            }
        });
        console.log(count);//I need to return the number of featured cards here.
    }
}

Or, more optimally:

function placeCard(col){
    var i = 0;
    for(i=1; i<= col; i++){
        var nthCard = $('.card:nth-child(' + col + 'n+' + i + ')');
        var count = 0;
        nthCard.each(function(idx, card){
            //do some code
            if (card.className === 'card featured') {
                count += 1;
            }
        });
        console.log(count);//I need to return the number of featured cards here.
    }
}

edited May 15, 2013 at 23:54

answered May 15, 2013 at 23:44

rjmunro

28.3k21 gold badges113 silver badges135 bronze badges

4 Comments

DeweyOx Over a year ago

I think @Blender's solution is cleaner and less resource intensive.

ntgCleaner Over a year ago

Another great example! Thank you! I tried this and changed $(card) to $(this) and it works the same as Blender's method, though Blender's method is cleaner.

rjmunro Over a year ago

@DeweyOx I suspect that as you are looping anyway, it's less resource intensive to use the loop. I've added another version that doesn't use jQuery in the loop, which will be more optimal.

Blender Over a year ago

@DeweyOx: You throw most concepts of efficiency out of the window when you use jQuery, so I don't think it makes any difference in this case.

Collectives™ on Stack Overflow

jQuery getting element by class name with one of two classes in a variable

3 Answers 3

1 Comment

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related