CODEWITHSUNDEEP
jquery
JoeTidee
JoeTidee

Reputation: 26124

Select various elements at parent level using Jquery

I have the following nested list:

<ul id="myList">
    <li>
        <ul>
            <li class="red"></li>
            <li class="black"></li>
        </ul>
    </li>
    <li class="red"></li>
    <li class="red"></li>
    <li class="black"></li>
</ul>

How do I select the elements with the class "red" and "black" that only appear directly inside the outer (and not include those inside the nested tag)?

Upvotes: 0

Views: 38

Answers (3)

lynnsea
lynnsea

Reputation: 137

 $("#myList>.red ,#myList>.black")

">" means son , so the selector "#myList>.red" means the div with id #myList's son(has class red), this will not select grandson 。

"," means join the other selector, by using #myList>.red you can find two elements, #myList>.black you can also find one .

I guess this is the result you expected. sorry for my poor english. I also recommend you to read about jQuery selector,this is really basic and important .

Upvotes: 0

guest271314
guest271314

Reputation: 1

Try using .not() to select .red , .black classes that are not child elements of any element

$(".red, .black").not("#myList * *").css("color", "blue")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="myList">
    <li>
        <ul>
            <li class="red"></li>
            <li class="black"></li>
        </ul>
    </li>
    <li class="red"></li>
    <li class="red"></li>
    <li class="black"></li>
</ul>

Upvotes: 0

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

you need to use > sign

#myList > li.red , #myList > li.black

DEMO

and if you just need the red and black inside inner ul

#myList ul > li.red , #myList ul > li.black

I recommend to read about Selectors

Upvotes: 1

Related Questions