How to add a class to a parent li with jquery

Hi There,

- I've got a list similar to the following:

dantheman50_98

Newbie Poster

20 posts since Aug 2008

Reputation Points: 10

Solved Threads: 0

1 Year Ago

0

You want the li to have a class if it has child ul/li's ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
  <ul>
    <li>One</li>
    <li>Two
      <ul>
        <li>Two 1</li>
        <li>Two 2</li>
      </ul>
    </li>
    <li>Three</li>
    <li>Four
      <ul>
        <li>Four 1</li>
        <li>Four 2</li>
      </ul>
    </li>
  </ul>
  <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $("ul li ul").parent().addClass("test");
    });
  </script>
</body>
</html>

pritaeas

Posting Expert

Moderator

5,480 posts since Jul 2006

Reputation Points: 653

Solved Threads: 875

1 Year Ago

0

Hi pritaeas,

That's exactly what I'm trying to achieve. I tried your code but it hasn't worked for some reason. I'm using jquery.min.js version 1.4.2 as in your example - with your code immediately beneath the menu and also with it in the header but with no class added to the parent li.
Here's the menu code (yep - it's the superfish menu):

<ul class="sf-menu" id="news-menu"> 			
		<li> 
		  <a href="what-we-do.html">CATEGORIES</a>	
		    
		  <ul class="dropmenu sf-vertical"> 
<li class="toplevel"><a href="http://example.com/shop/1">Item 1</a> 
<ul><li class="sub"><a href="http://example.com/2">Item 2</a></li>	
</ul></li> 
<li class="toplevel"><a href="http://example.com/3">Item 3</a></li> 
<li class="toplevel"><a href="http://example.com/4">Photography</a> 
</li> 
</ul></ul>

Any idea why nothing is happening?

Thanks for your help.
Dan

dantheman50_98

Newbie Poster

20 posts since Aug 2008

Reputation Points: 10

Solved Threads: 0

1 Year Ago

0

Do you have it online somewhere to view ?

You say my code doesn't work either, are you sure it can find the jquery file ?

pritaeas

Posting Expert

Moderator

5,480 posts since Jul 2006

Reputation Points: 653

Solved Threads: 875

1 Year Ago

0

Hello again. Yes, I've sent you a pm with the url as the site is for a client and the site hasn't been launched yet
Cheers,
Dan

dantheman50_98

Newbie Poster

20 posts since Aug 2008

Reputation Points: 10

Solved Threads: 0

1 Year Ago

0

If I open it in IE and watch with the Developer Tools, the test class is added just fine. Same in Opera with Inspect Element.

pritaeas

Posting Expert

Moderator

5,480 posts since Jul 2006

Reputation Points: 653

Solved Threads: 875

1 Year Ago

0

Oh great, that's awsome. I was looking at the source code and it doesn't appear there but it does show up in firefox dev tools. As you can see I am new to javascript and jquery...thank you for all your help.

Regards,
Dan

dantheman50_98

Newbie Poster

20 posts since Aug 2008

Reputation Points: 10

Solved Threads: 0

How to add a class to a parent li with jquery

This article has been dead for over three months