I'm a noob in jQuery and have stuck at this. I have the following HTML code output from a PHP page:

1. <ul class="cats">
2. <li><span><a href="cant_post_link_yet1">Lifestyle</a></span></li>
3. <li><span><a href="cant_post_link_yet2">Entertainment</a></span></li>
4. <li class="has_child">
5. <span><a href="cant_post_link_yet3">Technology</a></span>
6. <ul class="subcats">
   
7. <li><span><a href="cant_post_link_yet4">Gadgets</a></span></li>
8. <li><span><a href="cant_post_link_yet5">Hardware</a></span></li>
9. </ul>
10. </li>
11. <li><span><a href="cant_post_link_yetsports">Sports</a></span></li>
12. <li class="has_child">
13. <span><a href="cant_post_link_yet6">Design</a></span>
14. <ul class="subcats">
15. <li class="has_child">
16. <span><a href="cant_post_link_yet7">Web Design</a></span>
17. <ul class="subcat">
18. <li><span><a href="cant_post_link_yet8">Adobe Photoshop</a></span></li>
19. </ul>
20. </li>
21. <li><span><a href="cant_post_link_yet9">Graphics and Print</a></span></li>
22. </ul>
23. </li>
    
24. </ul>

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 HTML output anymore because it's in the PHP code.

Any help is greatly appreciated.