Question

我正在尝试向包含子项的<li>列表中的每个<ul>节点添加文本。

以下是一个例子：

<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>是否有子节点，因此在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实现这一点。谢谢！

Here's a visual example.

以下是不良影响的直观示例。

Code example

这是网页上的一大块代码，我认为它来自DOM，是吗？

编辑我已成功解决了我的问题。以下是我到目前为止所做的事情：

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

这确实会在正确的位置添加文本，但锚链接不再起作用且子节点不显示。

Answer 1

使用append是正确的想法，但查看代码似乎要添加＆gt;到列表中的标签（似乎a已被设置为display:block;，这导致＆gt;进入新行）。请尝试以下方法：

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

这应该添加＆gt;给任何直接的孩子一个标签。

Answer 2

我会尝试这样的事情：

$( '.dropdown ul li:has( "ul" )' ).each( function()
{
    var that = $( this );
    var currentText = that.html( );
    var newText = currentText + '>';

    that.html( newText );
}

本质上它与Milind的答案非常相似，但这种方式更明确，并将其分解为不同的步骤，这可能会有所帮助，也可能没有帮助，谁知道：P。抱歉，如果你认为我的代码看起来有点傻，我喜欢使用很多空格和显式声明。：D希望它有效！如果不是，则在currentText的末尾可能会有一个新的行字符，如果是这种情况，那么我们需要找到一种方法来在连接＆＃39;＆gt;＆＃39;之前删除它。

Answer 3

我猜你想要＆＃34;＆gt;＆＃34;附加到<a>之前的<ul>元素内的文本;正确？

以下将会这样做：

$("a + ul", listItems).prev().append(" >");

在此处查看此行动：http://fiddle.jshell.net/SZuMC/

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

3 个答案: