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.