Get all elements that contain a particular descendant

Question

I'm trying to loop through all <li> tags that contain the class .fas using the jQuery contains() method and perform some stuff on each one.

$('li:contains(".fas")').each(function (index) {
    //stuff
}

I keep getting the reference error that contains is not defined. Am I using this method incorrectly?

Wouldn't that loop through all `.fas` that have a parent of `
Your question is a bit ambiguous, but the query above returns all the `li`s that have class `fas`. Is that what you are looking for? — Andrei Cioara, Oct 18 '18 at 16:10
No, I am trying to get all `li`s that have a descedant with a class of `.fas` — noclist, Oct 18 '18 at 16:18

isherwood · Accepted Answer · 2018-10-18T16:17:23.137

1

You want has().

$('li:has(".fas")').each(function (index) {
    //stuff
}

edited Oct 18 '18 at 16:17

answered Oct 18 '18 at 16:09

isherwood

For reference, [`contains()`](https://api.jquery.com/jquery.contains/) checks whether a "DOM element is a descendant of another DOM element"; [`:contains()`](https://api.jquery.com/contains-selector/) selects "all elements that contain the specified text"; [`has()`](https://api.jquery.com/has/) reduces "the set of matched elements to those that have a descendant that matches the selector or DOM element." – showdev Oct 18 '18 at 16:22

score 1 · Answer 2 · answered Oct 18 '18 at 16:21

1

Another way to do this would be to flip your logic.

$('.fas').closest('li');

You could find all the fas and then find their parent lis.

answered Oct 18 '18 at 16:21

Taplar

This would run the function for every case where `.fas` is a child of `li`, which would possibly result in repeated execution. where a list item has multiple such child elements. – isherwood Oct 18 '18 at 16:24
That's a true statement – Taplar Oct 18 '18 at 16:25

Mark Schultheiss · Answer 3 · 2018-10-18T16:28:02.040

Your question ambiguity leaves me to cross answer this.

First off:

$('li.fas')

That says to the sizzle engine: Get all elements that have class fas, then reduce that to elements of li (that have that class)

With a space in between this says:

$('li .fas')

Get all elements that have a class fas, then reduce to those that are a decedent of an li element.

$('li>.fas')

Get all elements that have class fas, then reduce that do a set that are direct children of an li element.

The other answer has the .has() so I will not repeat that.

Filter: (basically same as :has() in this case

$('li').filter(function(){
    // reduce the li set; return true when a descendant has the 'fas' class
    return !!$(this).find('.fas').length;
});

None of these work for `li`s that contain a descendant with a class of `.fas` — noclist, Oct 18 '18 at 16:24
@noclist Note I added the filter - due to the ambiguity of the question — Mark Schultheiss, Oct 18 '18 at 16:28

3 Answers3