Member Avatar for dantheman50_98

Hi There,

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

<ul>
<li><a href="item1.php">item1</a></li>
<li><a href="item2.php">item2</a>
<ul>
<li><a href="item2-5.php">item2-5</a></li>
</ul</li>
<li><a href="item3.php">item3</a></li>
</li>

- Item 2 needs to have a class added to the li using jquery. I've tried the following but it isn't working:

<script>
jQuery(function(){
$(this).parent('li').addClass('current');
});
</script>

I'm new to jquery so I'm shooting in the dark somewhat here so if anyone can point me in the right direction is would be most appreciated.
I should mention that there'll be a few of these nested lists, the parents (li) of which will all need a class added via jquery.

Thanks,
Dan

  • 2 Contributors
  • 6 Replies
  • 152 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by dantheman50_98

Recommended Answers

All 6 Replies

Member Avatar for pritaeas

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>
Edited by pritaeas because: n/a
Member Avatar for dantheman50_98

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

Member Avatar for pritaeas

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 ?

Member Avatar for dantheman50_98

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

Member Avatar for pritaeas

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.

Member Avatar for dantheman50_98

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.