仅针对父母 'li' 而忽略其他孩子 'li's答案

【问题标题】：Targeting Only the Parent 'li' and ignoring Other CHildren 'li's'仅针对父母 'li' 而忽略其他孩子 'li's
【发布时间】：2011-09-06 15:25:59
【问题描述】：

我知道我已经接近完成排序，但我确信有更好的方法来实现以下目标：

我想定位有一个孩子 'ul' 的 'li's' 并附加一个像这样的跨度：

<li class="parent">
 <a>Item 1 <span> </span></a>

  <ul>
    <li></li>
    <li></li>
  </ul>
</li>

这是我正在尝试使用的 jQuery：

jQuery(document).ready(function(){
jQuery('ul').attr("id", "nav");
jQuery("ul#nav li:has(ul)").addClass("hasChildren");    
if (jQuery('ul#nav li.hasChildren').length)
{
    jQuery('ul#nav li.hasChildren a').append("<span></span>");
}
});

问题是跨度被添加到所有“li”中，无论它们是否有 sub ul。

所以我的问题是如何仅将跨度添加到其中包含 sub ul 的 li 中，而不是添加到所有 li 中

加里

【问题讨论】：

仅供参考，jQuery('ul').attr("id", "nav"); 为您页面上的每个ul 提供nav 的ID。由于 id 应该是唯一的，因此您可能会追求类似 jQuery('ul').first().attr("id", "nav");
另外，您发布的代码works for me。

标签： jquery navigation html-lists

【解决方案1】：

代码中的问题在于这个选择器ul#nav li:has(ul)。它将查找ul#nav 中的所有li 元素。如果您只想查找子元素，那么您应该使用ul#nav > li:has(ul)。试试这个

jQuery(document).ready(function(){
   jQuery('ul:first').attr("id", "nav");
   jQuery("ul#nav > li:has(ul)").addClass("hasChildren");    
   if (jQuery('ul#nav li.hasChildren').length)
   {
       jQuery('ul#nav li.hasChildren a').append("<span></span>");
   }
});

您的代码的简化版本。

jQuery(document).ready(function(){
   jQuery('ul:first').attr("id", "nav");
   jQuery("#nav > li:has(ul) li").append("<a>...<span>..</span> </a>");
   }
});

【讨论】：

那个选择器有什么问题？它正在寻找所有包含ul 的li 元素，这正是OP 所追求的。
@Matt - 他正在寻找其中包含 ul 的子元素。如果您未指定仅查看子元素，那么它将查找所有 li。希望您理解这一点并删除您的反对票。
是的，但这是由 OP 决定的，我猜 span 显示了一个小箭头（可用的子菜单或其他东西），所以他可能有多级子菜单，所以不仅应该选择第一级...也就是说，您的选择器不是将a + span 附加到具有sub ul 的li 内部的li 上吗？它不应该附加到 LI 本身而不是它的子 LI 吗？您的简化版选择器应该是：jQuery("#nav > li:has(ul)").append(...);
@Sander - #nav > li:has(ul) 将选择所有包含ul 的li。我不会选择ul 的li。所以我们必须使用#nav > li:has(ul) li 来获取内部ul 的所有li。
是的，这就是我要说的，他并不寻求针对内部 li，他想在容器 li 的链接中附加一个跨度。（我希望跨度会用小箭头或其他东西指示“可用子菜单”）

【解决方案2】：

ul#nav li.hasChildren a 选择器正在选择所有后代 a 元素。如果您只想选择直接子元素，请使用ul#nav li.hasChildren > a。

【讨论】：

这是我发现的工作...jQuery(document).ready(function(){ jQuery('#navigation ul:first').attr("id", "nav"); jQuery("ul#nav li:has(ul)").addClass("hasChildren"); if (jQuery('ul#nav li.hasChildren > a').length) { jQuery('ul#nav li.hasChildren > a').append("<span></span>"); } });

【解决方案3】：

试试这个：

$("li ul:first").before("<a>Item 1 <span> </span></a>");

它将选择每个li 中的第一个ul，并在其前面添加该文本。

【讨论】：