Question

我是jQuery中的菜鸟，并且坚持这一点。我从PHP页面输出以下HTML代码：

<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 更改为“＃”，但不会更改网页设计的href已经在二级列表中。

更多信息：在上面的代码中，如果list有子类别，那么它有 has_child 类，无论它是否在第一级。所以我只想将一级列表（ has_child ）修改为 href为“＃”我不能再改变输出了因为它在PHP代码中。

非常感谢任何帮助。

Answer 1

有几种方法可以做到这一点。最直接的方法是直接跟踪子元素：

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

当然，如果锚点未包含在跨度中，则会出现问题。您可以采用排他性方法：

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

这会比较慢但可能更接近预期的语义。它确实遇到与第一个类似的问题，因为子列表可能不在列表元素的正下方。

Answer 2

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

ul.cats > li.has_child在类名为has_child的ul中选择类名为cats的所有第一级li元素。 > span > a然后选择所有a个元素，它们是span中的第一级元素，它是前一个选择器的直接子元素。

jQuery：仅修改第一级列表的href属性

2 个答案: