Adding some css to inner most <ul>

Izzy76

Re: Adding some css to inner most <ul>

2 years ago

I think you could try

$("ul li .most-deeply-rooted").css("background-color", "yellow");

coldfusio..

Re: Adding some css to inner most <ul>

2 years ago

Hello,

I tried:

$("ul li .most-deeply-rooted").css("background-color", "yellow");

and it didn't work, but I think you meant:

$("ul li .most-deeply-nested").css("background-color", "yellow");

and that did not work either.

There are no elements that have any classes associated with them (initially), so nothing to match.

In the JSFiddle above there exists only <ul>'s and <li>'s initially.

Thanks though,
Jim

Izzy76

Re: Adding some css to inner most <ul>

2 years ago

Hi Jim!

Is this a static code? If so, why not give an id to list items you want to target?

Izzy76

Re: Adding some css to inner most <ul>

2 years ago

#most-deeply-nested{

color: green;

font-size: 18px;

}

<ul>

<li id="most-deeply-nested">Coffee</li>

</ul>

This works so you can target it by jQuery too.

coldfusio..

Re: Re: Adding some css to inner most <ul>

2 years ago

I appreciate the effort in trying to solve this problem - Thanks Izzy

watusiware

Re: Adding some css to inner most <ul>

2 years ago

I think the point is that they do not wish to add a class or ID statically, but want some code to find the most deeply nested <ul>(s). The example given is rather confusing, as it shows the desired result, rather than the HTML that is initially given.

One other point of small confusion is the request to add "CSS class" but what is shown is inline style, not class. Maybe the inline style was just shown to highlight in the example. In actual use, I'd recommend just styling in a CSS style sheet based on the most-deeply-nested class.

In any case, an ID would not do, since IDs must be unique, and there there may be more than one <ul> at the same nesting level. If done statically (or on server when HTML is created) would need to use a CSS class as the author has shown, rather than an ID.

This StackOverflow looks useful. It doesn't quite solve this particular problem, but can be used as part of a solution. Ignore the "click" callback part of this. This short solution can be used to determine the nesting level of any particular <ul>. You'll need an ID on the "root" element of the tree for use with parentsUntil().

http://stackoverflow.com/questions/21105099/get-level-of-link-within-nested-list

One way for a complete solution would be to use a two-pass process and attach the nesting level to each <ul> using .data() on the first pass. At the same time, you can maintain a variable with the deepest level number encountered. On the second pass, you will go through again, find the element(s) where the .data() item value matches the deepest nesting level, and then add a CSS class to those.

Leaving this as an exercise for the author, as unsure if this is exactly what is wanted. But it might point in the right direction.

coldfusio..

Re: Adding some css to inner most <ul>

2 years ago

"I think the point is that they do not wish to add a class or ID statically, but want some code to find the most deeply nested <ul>(s). The example given is rather confusing, as it shows the desired result, rather than the HTML that is initially given."

Please see the JSFIddle for the initial html or I can also paste it here:
        <ul>
            <li>Coffee</li>
            <li>Tea</li>
            <li> <ul>
                <li>Coffee</li>
                <li> <ul>
                    <li>Coffee</li>
                    <li>Tea</li>
                    <li>Milk</li>
                </ul> </li>
                <li> <ul>
                    <li> <ul>
                        <li>Coffee</li>
                        <li> <ul>
                            <li>Coffee</li>
                            <li> <ul>
                                <li>Coffee</li>
                                <li> <ul>
                                    <li>Coffee</li>
                                    <li> <ul>
                                        <li>Coffee</li>
                                        <li>Tea</li>
                                        <li> <ul>
                                            <li> <ul>
                                                <li>Coffee</li>
                                                <li> <ul>
                                                    <li>Coffee</li>
                                                    <li> <ul>
                                                        <li>Coffee</li>
                                                        <li>Tea</li>
                                                        <li>Milk</li>
                                                    </ul> </li>
                                                    <li> <ul>
                                                        <li>Coffee</li>
                                                        <li> <ul>
                                                            <li>Coffee</li>
                                                            <li> <ul>
                                                                <li>Coffee</li>
                                                                <li>Tea</li>
                                                                <li>Milk</li>
                                                            </ul> </li>
                                                            <li>Milk</li>
                                                        </ul> </li>
                                                        <li>Milk</li>
                                                    </ul> </li>
                                                </ul> </li>
                                                <li>Milk</li>
                                            </ul> </li>
                                            <li>Tea</li>
                                            <li>Milk</li>
                                        </ul> </li>
                                    </ul> </li>
                                    <li>Milk</li>
                                </ul> </li>
                                <li>Milk</li>
                            </ul> </li>
                            <li>Milk</li>
                        </ul> </li>
                        <li>Milk</li>
                    </ul> </li>
                    <li>Tea</li>
                    <li>Milk</li>
                </ul> </li>
            </ul> </li>
        </ul>

The above, which is the JSFiddle HTML code ( if you look ) .

So maybe to end up with the result desired which is a screen shot that I also included in the original post
a recursive solution is the way to code this.

Jim

coldfusio..

Re: Adding some css to inner most <ul>

2 years ago

The "author" found a solution see:

https://jsfiddle.net/hgbh43jf/5/

Thanks for your input though Izzy76!

Jim

jakecigar

Re: Adding some css to inner most <ul>

2 years ago

https://jsfiddle.net/jakecigar/fL6cd5tk/1/ <-- changes the CSS definition a bit.

(n=>{for(;n.children().length;)n=n.children();n.parent().addClass("theparent")})($("body"));

No recursion needed. No multiple loops.

JΛ̊KE

coldfusio..

Re: Adding some css to inner most <ul>

2 years ago

"What I need is some jQuery code that can traverse this tree and find the most deeply nested <ul> and add the classes as shown above and set the background to yellow for the <li>'s"

This is what I am looking for:

<ul class="theparent">
<li class="most-deeply-nested" style="background-color: yellow;">Coffee</li>
<li class="most-deeply-nested" style="background-color: yellow;">Tea</li>
<li class="most-deeply-nested" style="background-color: yellow;">Milk</li>
</ul>

Not this:

<ul class="theparent">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

jakecigar