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

Question

我在 SharePoint 中有一个手风琴导航快速启动。手风琴效果很好，但是，我正在尝试将图标附加到 SharePoint 中的顶级 ul 标题。不幸的是，所有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。 [这是详尽的]。

ETA：如果我取出 find("li span.menu-item-text:first") 部分，脚本将按预期工作。但是，如果 UL 展开，+ 将移动到 UL 的底部。我试图通过以某种方式将 + 放在标题所在的 <span> 中来防止这种情况发生。

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

Answer 1

使用:first-child Selector 代替:first Selector

虽然:first 只匹配一个元素，但:first-child 选择器可以匹配多个：每个父元素一个。

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

Updated Fiddle