CODEWITHSUNDEEP
jquery
krzyhub
krzyhub

Reputation: 6540

Understanding of not() function in jQuery

I do not understand why I am still getting element <li class=".item-2"> with red background. Please take a look a my code and provide me some tips.

<ul class="level-1">
    <li class="item-i">I</li>
    <li class="item-ii">II
        <ul class="level-2">
            <li class="item-a">A</li>
            <li class="item-b">B
                <ul class="level-3">
                    <li class="item-1">1</li>
                    <li class="item-2">2 .item-2</li>
                    <li class="item-3">3</li>
                </ul>
            </li>
            <li class="item-c">C</li>
        </ul>
    </li>
    <li class="item-iii">III</li>
</ul>

$("li.item-ii").find('li').not($(".item-2")).css("background-color", "red");

JSFiddle: http://jsfiddle.net/k3cqS/1/

Upvotes: 0

Views: 28

Answers (1)

adeneo
adeneo

Reputation: 318182

find('li') matches the parent LI as well, so excluding the child doesn't matter when the parent has a red background.

You end up with this

<ul class="level-1">
    <li class="item-i">I</li>
    <li class="item-ii">II
        <ul class="level-2">
            <li class="item-a" style="background-color: red;">A</li>

            <!-- The below element is red, and is the parent element -->
            <li class="item-b" style="background-color: red;">B
                <ul class="level-3">
                    <li class="item-1" style="background-color: red;">1</li>

                    <!-- so it doesn't matter if this isn't red -->
                    <li class="item-2">2 .item-2</li>
                    <li class="item-3" style="background-color: red;">3</li>
                </ul>
            </li>
            <li class="item-c" style="background-color: red;">C</li>
        </ul>
    </li>
    <li class="item-iii">III</li>
</ul>

.item-2 is actually transparent, so the parents background is showing.

Upvotes: 2

Related Questions