Discussion:
Newbie Question: Finding and manipulating an element
Aaron Johnson
2010-03-01 11:06:55 UTC
Permalink
Hello...

I have an unordered list containing nested lists...

<ul class="foo">
<li><a title="Announcements1" href="foo.html"><span
class="portal-navigation-label">Home</span></a>
<ul>
<li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
<li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
<li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
</ul>
</li>
<li><a title="Announcements2" href="foo.html"><span
class="portal-navigation-label">Home</span></a>
<ul>
<li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
<li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
<li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
</ul>
</li>
<li><a title="Announcements3" href="foo.html"><span
class="portal-navigation-label">Home</span></a>
<ul>
<li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
<li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
<li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
</ul>
</li>
</ul>

The top level list has an ID and associated css, I'd like to add a class to
each of the nested <ul> elements in order to style them differently. I
cannot manually add a class so wondered if I could do it with jQuery.

I'm looking for a result like this:

<ul class="foo">
<li><a title="Announcements1" href="foo.html"><span
class="portal-navigation-label">Home</span></a>
<ul class="bar">
<li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
<li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
<li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
</ul>
</li>
<li><a title="Announcements2" href="foo.html"><span
class="portal-navigation-label">Home</span></a>
<ul class="bar">
<li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
<li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
<li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
</ul>
</li>
<li><a title="Announcements3" href="foo.html"><span
class="portal-navigation-label">Home</span></a>
<ul class="bar">
<li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
<li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
<li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
</ul>
</li>
</ul>

Thanks for your help!

Aaron
Greg Tarnoff
2010-03-01 12:28:15 UTC
Permalink
This will add the class for you. Put it in the document ready function
if you want it on page load or in whatever function you want to call
it from.

$('ul.foo li 'ul").addClass("bar");
Post by Aaron Johnson
Hello...
I have an unordered list containing nested lists...
<ul class="foo">
    <li><a title="Announcements1" href="foo.html"><span
class="portal-navigation-label">Home</span></a>
        <ul>
            <li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
            <li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
            <li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
        </ul>
    </li>
    <li><a title="Announcements2" href="foo.html"><span
class="portal-navigation-label">Home</span></a>
        <ul>
            <li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
            <li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
            <li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
        </ul>
    </li>
    <li><a title="Announcements3" href="foo.html"><span
class="portal-navigation-label">Home</span></a>
        <ul>
            <li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
            <li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
            <li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
        </ul>
    </li>
</ul>
The top level list has an ID and associated css, I'd like to add a class to
each of the nested <ul> elements in order to style them differently. I
cannot manually add a class so wondered if I could do it with jQuery.
<ul class="foo">
    <li><a title="Announcements1" href="foo.html"><span
class="portal-navigation-label">Home</span></a>
        <ul class="bar">
            <li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
            <li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
            <li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
        </ul>
    </li>
    <li><a title="Announcements2" href="foo.html"><span
class="portal-navigation-label">Home</span></a>
        <ul class="bar">
            <li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
            <li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
            <li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
        </ul>
    </li>
    <li><a title="Announcements3" href="foo.html"><span
class="portal-navigation-label">Home</span></a>
        <ul class="bar">
            <li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
            <li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
            <li><a title="Announcements"
href="foo.html"><span>Announcements</span></a></li>
        </ul>
    </li>
</ul>
Thanks for your help!
Aaron
Nathan Klatt
2010-03-01 14:58:44 UTC
Permalink
On Mon, Mar 1, 2010 at 5:06 AM, Aaron Johnson
Post by Aaron Johnson
The top level list has an ID and associated css, I'd like to add a class to
each of the nested <ul> elements in order to style them differently. I
cannot manually add a class so wondered if I could do it with jQuery.
<ul class="foo">
    <li><a title="Announcements1" href="foo.html"><span
class="portal-navigation-label">Home</span></a>
        <ul class="bar">
If all of the inner uls are styled the same you don't need a class,
just add a rule to your css:

ul.foo > li > ul {
/* style stuff */
}

Nathan
Aaron Johnson
2010-03-01 15:25:29 UTC
Permalink
Greg, Nathan, Thanks very much for your help!
Post by Nathan Klatt
On Mon, Mar 1, 2010 at 5:06 AM, Aaron Johnson
Post by Aaron Johnson
The top level list has an ID and associated css, I'd like to add a class
to
Post by Aaron Johnson
each of the nested <ul> elements in order to style them differently. I
cannot manually add a class so wondered if I could do it with jQuery.
<ul class="foo">
<li><a title="Announcements1" href="foo.html"><span
class="portal-navigation-label">Home</span></a>
<ul class="bar">
If all of the inner uls are styled the same you don't need a class,
ul.foo > li > ul {
/* style stuff */
}
Nathan
Greg Tarnoff
2010-03-02 15:22:37 UTC
Permalink
Aaron,
Not sure if you caught it, but I screwed up some quotes in my code
snippet (stupid iphone). It should be:

$('ul.foo li ul').addClass("bar");
Post by Aaron Johnson
Greg, Nathan, Thanks very much for your help!
Post by Nathan Klatt
On Mon, Mar 1, 2010 at 5:06 AM, Aaron Johnson
Post by Aaron Johnson
The top level list has an ID and associated css, I'd like to add a class
to
Post by Aaron Johnson
each of the nested <ul> elements in order to style them differently. I
cannot manually add a class so wondered if I could do it with jQuery.
<ul class="foo">
    <li><a title="Announcements1" href="foo.html"><span
class="portal-navigation-label">Home</span></a>
        <ul class="bar">
If all of the inner uls are styled the same you don't need a class,
ul.foo > li > ul {
 /* style stuff */
}
Nathan
Loading...