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

【问题标题】：jQuery: modify href attribute for first level list onlyjQuery：仅修改第一级列表的 href 属性
【发布时间】：2010-03-12 15:33:35
【问题描述】：

我是 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 属性？基本上，我想将 Technology 和 Design 的 href 更改为 "#" 但不会更改网页设计的href已经在二级列表中。

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

非常感谢任何帮助。

【问题讨论】：

标签： jquery jquery-selectors

【解决方案1】：

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

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

如果锚点不包含在跨度中，当然会有问题。您可以改为采用排除方法：

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

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

【讨论】：

感谢您的快速响应，这就是我要找的 - 第一个代码。我之前有几乎类似的方法： $("ul.cats > li span a").attr("href", "....");它没有用。你能指出它有什么问题吗？
查看我的答案并检查它是否有效。此外，您发布的 HTML 格式不正确。
@rahul 是的，这个和你的工作完美，但我正在使用你的答案，因为它特定于 .has_child。我发布的 HTML 缺少，因为它不是完整的输出。
@bloggerious 你的不起作用，因为> 是一个子选择器，没有它它是一个后代选择器，所以ul.cat > li span a 将找到ul.cats 的直接子代，然后找到所有span a后代，其中包括子列表中的链接。这就是为什么我的 > 一直向下。
感谢您的解释。至少我一天天学一点:)

【解决方案2】：

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

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

【讨论】：