仅用于将 + 符号附加到 span 类的第一个实例的 jQuery 选择器

Question

我在 SharePoint 中有 Accordion 导航快速启动。 Accordion 效果很好，但是，我正在尝试将图标附加到顶层 ul SharePoint 中的标题。不幸的是，所有ul和 li无论级别都有 menu-item-text. 的跨度类我终其一生都无法弄清楚使用哪个选择器将图标附加到顶级标题上，而不是子菜单下的后续列表项。

这里是 jQuery。

var parent = $("#zz12_V4QuickLaunchMenu > ul > li:has('ul')");
parent.find("li span.menu-item-text:first").append("<b>+</b>");
parent.closest("li").find("> ul").hide();
parent.click(function(event) {
    event.preventDefault();
    var childUL = $(this).closest("li").find("> ul");
    var isVisible = childUL.is(":visible");
    if (isVisible) {
        childUL.slideUp();
    } else {
        childUL.slideDown();
    }
});

但是，可以通过下面的 jsfiddle 链接查看 html。 [详尽无遗]。

预计到达时间:如果我取出 find("li span.menu-item-text:first")部分，脚本按预期工作。但是，如果扩展了 UL，+ 将移至 UL 的底部。我试图通过某种方式将 + 放在同一个 <span> 中来防止这种情况发生标题被包裹在里面。

请看我的jsfiddle:https://jsfiddle.net/m30nar2p/2/

Answer 1

使用:first-child Selector而不是 :first Selector

While :first matches only a single element, the :first-child selector can match more than one: one for each parent.

parent.find("li span.menu-item-text:first-child").append("<b>+</b>");

Updated Fiddle