如何在每个<ul>的最后一个<li>之后删除所有文本？</ul> </li>

Question

我的菜单也有子菜单。页面加载后..网站在每个子菜单结束后生成随机文本..

这是从firebug生成的当前标记：

<nav class="shopMenuHover">
    <div id="bx_incl_area_5_1"> 
        <ul> 
            <li><a href="#" >First Menu</a>
            <div class="" style=""><h2><a href="#">First Sub Menu</a></h2>
                <ul> 
                    <li>
                        <a href="">Sub Menu &gt; Sub Menu</a>
                    </li>

                    <li><a href="">Sub Menu &gt; Sub Menu</a> 90797</li>
                </ul>
            </div>
        </li>


        <li class="firstLevel hasSubmenu instrumentarium-en-fresen">
        <a href="#" class="firstLevel">Second Menu</a>

        <div><h2><a href="">Second Menu</h2>
            <ul>
                <li><a href=""><font><font>Sub Menu &gt; Sub Menu</a></li>
                <li><a href="">Sub Menu &gt; Sub Menu</a> 896346</li>
            </ul>

        </div>
        </li>

        </ul>
    </div>
</nav>

问题：文字 90797 和 896346 是网站随机生成的文字。如何在每个最后一个＆gt;之后删除这些文本。一个在每个ul里面？

这是我用来选择仅标记内的文字的当前jquery：

<script type="text/javascript">
$(document).ready(function() {
$(".shopMenuHover ul li:last-child > a").css( "border", "2px solid red");
});
</script>

输出：删除所有最后一个孩子的标签后的所有文字..

请帮助我......

Answer 1

您可以使用contents()选择所有节点，包括文本节点，然后使用filter()获取锚点外的文本节点，然后将其删除

$(".shopMenuHover ul li:last-child").contents().filter(function() {
    return this.nodeType === 3;
}).remove();

FIDDLE

Answer 2

以下是使用visibility属性使用CSS执行此操作的方法：

<强> DEMO

.shopMenuHover ul li:last-child{
    visibility:hidden;
}
.shopMenuHover ul li:last-child > *{
    visibility:visible;
}

注意：使用*选择器，即使<li>包含的内容不是链接，它也能正常工作。

Answer 3

另一种选择是将html的{​​{1}}设置为li。

a

http://jsfiddle.net/ujrp151h/1/

除了$(".shopMenuHover ul li:last-child").each(function(){ var $this = $(this); $this.html($this.children("a")); }); 之外，还可以清除元素中的任何其他内容，而不仅仅是文本节点。