javascript - 向每个有子节点的 li 节点添加文本

Question

我正在尝试向每个 <li> 添加文本<ul> 中的节点有 child 的列表。

这是一个例子:

<ul class="dropdown">
    <li style="width: 100px">
        <a href="@Url.Action("SearchOrders", "ManageOrders")">Orders</a>
        <ul>
            <li>@Html.ActionLink("Create Supplier Order", "CreateSupplierOrder", "ManageOrders")</li> 
            <li>@Html.ActionLink("Checkout Supplier Orders", "DisplaySupplierOrdersToCheckout", "ManageOrders")</li>
            <li>
                <a href="@Url.Action("SearchByOrders", "RefundOrder")">Issue a refund</a>
                <ul>
                    <li>@Html.ActionLink("By Orders", "SearchByOrders", "RefundOrder")</li>
                    <li>@Html.ActionLink("By Customer", "SearchByCustomers", "RefundOrder")</li>
                    <li>@Html.ActionLink("By items", "SearchByItems", "RefundOrder")</li>
                </ul>
            </li>
            <li>@Html.ActionLink("List Orders", "SearchOrders", "ManageOrders")</li>
        </ul>
    </li>
</ul>

在这个例子中，我想检测 <a href="@Url.Action("SearchByOrders", "RefundOrder")">Issue a refund</a>有 child ，所以用 jQuery 编写一个脚本，自动添加一个 >到正文。

到目前为止，我已经这样做了:

$(document).ready(function () {
    $(".dropdown ul li:has('ul')").css("background-color", "#DFDFDF");

    var listItems = $(".dropdown ul li:has('ul')");

    listItems.each(function(idx, li) {
        var liText = li.text;

        li.text = (liText + " >");
    });
});

代码的第一部分有效并通过颜色指示节点有子节点，但文本没有更改。

我也试过这个:

$(".dropdown ul li:has('ul')").text(" >");

或者:

$(".dropdown ul li:has('ul')").append(" >");

但是第一个替换了整个文本，而第二个将文本附加到新行，这不是想要的效果。

谁能帮帮我？请注意，我可以简单地重写 HTML 中的节点以手动添加文本，但我想通过 jQuery 实现此目的。谢谢!

这是不良影响的视觉示例。

这是网页中的一段代码，我认为它来自 DOM，是吗？

编辑 我已经部分成功地解决了我的问题。这是我到目前为止所做的:

$(".dropdown ul li:has('ul')").each(function () {
        $(this).html($(this).find('a:first').html() + " >");
    });

这确实在正确的位置添加了文本，但是 anchor 链接不再起作用并且子项不显示。

Answer 1

使用 append 是正确的想法，但查看代码似乎您想将 > 添加到列表内的 a 标记(似乎 a 已设置为 display:block; 导致 > 换行)。尝试以下操作:

$(".dropdown ul li:has('ul')").find("> a").append(" >");

这应该将 > 添加到 a 标签的任何直接子标签中。