如何select父元素？

Question

我正在尝试制作一个侧边栏，将最后一次点击 link 存储到本地存储中，并且在页面重新加载后仍然打开折叠 links。

$(".clickedLink").parent().parent().css('background-color', 'green');

有人可以帮我如何 select 元素吗？

示例：如果我单击“PHP 高级”link，它将 select #5 和 #6，还有 #1 和 #2。但不是 select#3 和 #4...

<a class="nav-link" aria-expanded="false">Programming</a> __#1__
<div class="collapse"> __#2__
    <ul>
        <li>
            <a class="nav-link" aria-expanded="false">HTML</a> __#3__
            <div class="collapse"> __#4__
                <ul>
                    <li><a href="../html/html-basic.php" class="nav-link">HTML Basic</a></li>
                    <li><a href="../html/html-advanced.php" class="nav-link">HTML Advanced</a></li>
                    <li><a href="../html/html-examples.php" class="nav-link">HTML Examples</a></li>
                </ul>
            </div>
        </li>
        <li>
            <a class="nav-link" aria-expanded="false">PHP</a> __#5__
            <div class="collapse"> __#6__
                <ul>
                    <li><a href="../php/php-basic.php" class="nav-link">PHP Basic</a></li>
                    <li><a href="../php/php-advanced.php" class="nav-link clickedLink">PHP Advanced</a></li>
                    <li><a href="../php/php-examples.php" class="nav-link">PHP Examples</a></li>
                </ul>
            </div>
        </li>
    </ul>
</div>

如果有人能帮助我，我将不胜感激

Answer 1

你可以这样做。调用 parents('.collapse') 得到所有 parents 给定的 class。然后调用 prev() 获取链接。

$('a').click(function() {
  var parents = $(this).parents('.collapse');
  parents.css('border-top', '1px solid red');
  parents.prev().css('border-top', '1px solid blue');
  return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="nav-link" aria-expanded="false">Programming</a> __#1__
<div class="collapse"> __#2__
    <ul>
        <li>
            <a class="nav-link" aria-expanded="false">HTML</a> __#3__
            <div class="collapse"> __#4__
                <ul>
                    <li><a href="../html/html-basic.php" class="nav-link">HTML Basic</a></li>
                    <li><a href="../html/html-advanced.php" class="nav-link">HTML Advanced</a></li>
                    <li><a href="../html/html-examples.php" class="nav-link">HTML Examples</a></li>
                </ul>
            </div>
        </li>
        <li>
            <a class="nav-link" aria-expanded="false">PHP</a> __#5__
            <div class="collapse"> __#6__
                <ul>
                    <li><a href="../php/php-basic.php" class="nav-link">PHP Basic</a></li>
                    <li><a href="../php/php-advanced.php" class="nav-link clickedLink">PHP Advanced</a></li>
                    <li><a href="../php/php-examples.php" class="nav-link">PHP Examples</a></li>
                </ul>
            </div>
        </li>
    </ul>
</div>

如何select父元素？

How to select the parent elements?

html

javascript

jquery

parent