如何在复杂的未知级别ul li菜单中定位最后一个锚点

Question

我正在寻找一种方法来确定菜单中显示的最后一个锚点的范围。我正试图用css来弥补，但没有用。在我的例子中，我试图确定写有"yes"的锚点的范围，witch是列表中的最后一个，而不是"a parent"的最后一位。

html:

<div class="container">
<ul>
    <li><a href="#">no</a></li>
    <li><a href="#">no</a></li>
    <li>
        <ul>
            <li><a href="#">no</a></li>
            <li><a href="#">no</a>
                <ul>
                    <li><a href="#">no</a></li>
                    <li><a href="#">no</a>
                        <ul>
                            <li><a href="#">no</a></li>
                            <li><a href="#">yes</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
</div>
<hr/>
<div class="container">
<ul>
    <li><a href="#">no</a></li>
    <li><a href="#">no</a></li>
    <li>
        <ul>
            <li><a href="#">no</a></li>
            <li><a href="#">no</a>
                <ul>
                    <li><a href="#">no</a>
                        <ul>
                            <li><a href="#">no</a></li>
                            <li><a href="#">no</a></li>
                        </ul>
                    </li>
                    <li><a href="#">yes</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
</div>

jsfiddle：http://jsfiddle.net/u2BTz/2/

无论如何，我将接受jQuery解决方案，如果能帮助仅使用css来确定范围，我们将不胜感激。

Answer 1

Diodeus的答案是正确的，但如果你想利用last（）：，你必须实现两步匹配操作

$(".container").each(function() {
    $(this).find("a").last().css("background-color", "red");
});

否则，无论容器如何，所有<a>元素都将匹配，并且last()只返回其中最后一个元素。

Answer 2

忘记图层，直接选择锚点标记即可。

$('.container a').last().css('background-color', 'red');