jQuery: modify href attribute for first level list only
- by bloggerious
I'm a noob in jQuery and have stuck at this. I have the following HTML code output from a PHP page:
<ul class="cats">
<li><span><a href="cant_post_link_yet1">Lifestyle</a></span></li>
<li><span><a href="cant_post_link_yet2">Entertainment</a></span></li>
<li class="has_child">
<span><a href="cant_post_link_yet3">Technology</a></span>
<ul class="subcats">
<li><span><a href="cant_post_link_yet4">Gadgets</a></span></li>
<li><span><a href="cant_post_link_yet5">Hardware</a></span></li>
</ul>
</li>
<li><span><a href="cant_post_link_yetsports">Sports</a></span></li>
<li class="has_child">
<span><a href="cant_post_link_yet6">Design</a></span>
<ul class="subcats">
<li class="has_child">
<span><a href="cant_post_link_yet7">Web Design</a></span>
<ul class="subcat">
<li><span><a href="cant_post_link_yet8">Adobe Photoshop</a></span></li>
</ul>
</li>
<li><span><a href="cant_post_link_yet9">Graphics and Print</a></span></li>
</ul>
</li>
What's the correct jQuery code so that I can modify the href attribute for the first-level list only? Basically, I want to change the href of Technology and Design to be "#" but will not change the href of Web Design which is already on second-level list.
More Info:
In the code above, if list has subcategories, then it has the class has_child, whether it's on first-level or not. So I want only the first-level list which has class has_child to be modified the href to "#" I can't alter output anymore because it's in the PHP code.
Any help is greatly appreciated.
