Response title
This is preview!
Move this topic
Adding some css to inner most <ul>
in Using jQuery
•
4 years ago
Hello,
I have a JSFiddle over at:
https://jsfiddle.net/hgbh43jf/
I am also including a screen shot of what I need this page to look like.
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
Thanks,
Jim
I have a JSFiddle over at:
https://jsfiddle.net/hgbh43jf/
I am also including a screen shot of what I need this page to look like.
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
Thanks,
Jim
1
Replies(14)
Re: Adding some css to inner most <ul>
4 years ago
I think you could try
$("ul li .most-deeply-rooted").css("background-color", "yellow");
Leave a comment on Izzy76's reply
Re: Adding some css to inner most <ul>
4 years ago
Hello,
I tried:
I tried:
$("ul li .most-deeply-rooted").css("background-color", "yellow");
and it didn't work, but I think you meant:
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
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
Leave a comment on coldfusionguy's reply
Re: Adding some css to inner most <ul>
4 years ago
Hi Jim!
Is this a static code? If so, why not give an id to list items you want to target?
Leave a comment on Izzy76's reply
Re: Adding some css to inner most <ul>
4 years ago
#most-deeply-nested{
color: green;
font-size: 18px;
}
<ul>
<li id="most-deeply-nested">Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
This works so you can target it by jQuery too.
Re: Re: Adding some css to inner most <ul>
4 years ago
I appreciate the effort in trying to solve this problem - Thanks Izzy
Leave a comment on Izzy76's reply
Re: Adding some css to inner most <ul>
4 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().
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.
Leave a comment on watusiware's reply
Re: Adding some css to inner most <ul>
4 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
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
Leave a comment on coldfusionguy's reply
Re: Adding some css to inner most <ul>
4 years ago
The "author" found a solution see:
https://jsfiddle.net/hgbh43jf/5/
Thanks for your input though Izzy76!
Jim
https://jsfiddle.net/hgbh43jf/5/
Thanks for your input though Izzy76!
Jim
Leave a comment on coldfusionguy's reply
Re: Adding some css to inner most <ul>
4 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
Leave a comment on jakecigar's reply
Re: Adding some css to inner most <ul>
4 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>
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>
Re: Re: Adding some css to inner most <ul>
4 years ago
The CSS was changed. So you don’t need those classes. If they make you fell better…
- (n=>{for(;n.children().length;)n=n.children();n.addClass("most-deeply-nested").parent().addClass("theparent")})($("body"));
JΛ̊KE
Leave a comment on coldfusionguy's reply
Leave a comment on coldfusionguy's reply
Re: Adding some css to inner most <ul>
4 years ago
Now, you should go and figure out what that syntax I used is all about!
It’s called an ES6 or ES2016 Arrow function.
JΛ̊KE
Leave a comment on jakecigar's reply
Re: Adding some css to inner most <ul>
4 years ago
I saw Jake and did not want to touch it, not sure about support for ES6 but maybe true classes like JAVA!
Leave a comment on coldfusionguy's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to coldfusionguy's question
{"z634799021":[14737000007034023,14737000007034029,14737000007034031],"z7664639":[14737000007032075],"z18738316":[14737000007033068,14737000007031071,14737000007031119,14737000007031077,14737000007031079,14737000007031149,14737000007031153,14737000007031161],"z2950240":[14737000007031125,14737000007031151,14737000007031155]}