jQuery：選擇所選LI元素的所有父級

Question

我有一個分層的UL列表。 如何使用jQuery獲取所選LI元素的所有父級，並更改每個父級內部<a>的背景顏色？

<ul id="nav">
    <li>
        <a href="#">A</a>
        <ul>
            <li>
                <a href="#">B</a>
                <ul>
                    <li><a href="#">B1</a></li>
                    <li><a href="#">B2</a></li>
                    <li><a href="#">B3</a></li>

                    <li><a href="#">B4</a></li>
                    <li><a href="#">B5</a></li>
                </ul>
            </li>
            <li>
                <a href="#">C</a>
                <ul>
                    <li><a href="#">C1</a></li>
                    <li><a href="#">C2</a></li>
                    <li><a href="#">C3</a></li>
                </ul>
            </li>
        </ul>

如果我選擇<a href="#">B4</a> ，還將選擇<a href="#">B</a>和<a href="#">A</a>

Answer 1

以下內容將click事件綁定到所有<li>元素，並從字面上將背景色應用於所有父項及其本身。

$('li').click(function() {
    $(this).parents().andSelf().css('background-color', 'red');
});

jQuery文檔：

• parents
• andSelf

Answer 2

假設A和B都是UL元素，則以下代碼應該起作用：

$(this).parents('ul').addClass('new_class');