jQuery: изменить атрибут href только для списка первого уровня

Question

Я нуб в jQuery и застрял в этом. У меня есть следующий вывод HTML-кода со страницы PHP:

<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>

Какой правильный код jQuery, чтобы я мог изменить атрибут href только для списка первого уровня ? По сути, я хочу изменить href из Technology и Design на "#" , но не изменит href Веб-дизайн , который уже находится в списке второго уровня.

Подробнее: В приведенном выше коде, если список имеет подкатегории, он имеет класс has_child , независимо от того, находится он на первом уровне или нет. Поэтому я хочу, чтобы только список первого уровня с классом has_child был изменен href на "#" Я больше не могу изменить вывод, потому что он код PHP.

Любая помощь очень ценится.

Answer 1

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

ul.cats > li.has_child выбирает все элементы li первого уровня с именем класса has_child внутри ul с именем класса cats. > span > a затем выбирает все элементы a, которые являются элементами первого уровня внутри span, который является прямым потомком предыдущего селектора.

Answer 2

Есть несколько способов сделать это. Наиболее простым является непосредственное отслеживание дочерних элементов:

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

Конечно, есть проблемы, если якоря не содержатся в пролетах. Вместо этого вы можете использовать исключительный подход:

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

Это будет медленнее, но может быть ближе к предполагаемой семантике. Он страдает от проблемы, аналогичной первой, в которой дочерние списки могут не находиться непосредственно под элементом списка.