find() or children() to search top-level children only for a style?

Question

Hi,

I'd like to find if a child element exists which has either of two class styles applied. My code looks like this:

var listOfMatchedResults = $("#parentList").find(".myStyle1, .myStyle2");

My styles are defined like this:

.parent li, .myStyle0 {
}

.parent li.myStyle1 {
}

.parent li.myStyle2 {
}

I don't need to traverse more than one level deeper than the children level, like:

<ul id='parentList'>
    <li><p>foo</p><p>grok</p></li>
    <li class='myStyle2'><p>Here</p><p>I am!</p></li>
    <li><p>foo</p><p>grok</p></li>
</ul>

I'm not clear as to what find() is doing, is it going into each of the paragraph elements too? I just need it to traverse the top-level children - is there a way to specify that?

Thank you

Answer 1

I'm not clear as to what find() is doing, is it going into each of the paragraph elements too?

yes it does

I just need it to traverse the top-level children - is there a way to specify that?

yes, use .children()

From API Doc:

The .find() and .children() methods are similar, except that the latter only travels a single level down the DOM tree.