jQuery: modify href attribute for first level list only

Question

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

Any help is greatly appreciated.

Answer 1

There are a few ways of doing it. The most straightforward is to trace the child elements directly:

$("ul.cats > li > span > a").attr("href", "....");

Of course that has issues if the anchors aren't contained in spans. You can instead take an exclusionary approach:

$("ul.cats > li > :not(ul) a").attr("href", "...");

This will be slower but might be closer to the intended semantics. It does suffer from a similar issue to the first in that the child lists might not be directly below the list element.

Answer 2

$("ul.cats > li.has_child > span > a").attr("href","#");

ul.cats > li.has_child selects all first level li elements with class name has_child inside the ul with class name cats. > span > a then selects all a elements which are first level elements inside span which is direct child of the previous selector.