JavaScript:查询子项并修改父项

Question

我有一个静态生成的未排序列表，需要为给定的子 href 匹配修改父 li。这个 Action 应该通过渲染来执行，而不是通过交互来执行。我正在使用 jQuery 1.12.4。

<div id="archive_widget" class="widget-odd widget-last widget-first widget-1 widget Archive_Widget">
    <h3>Archive</h3>
    <ul>
        <li><a href="http://example.com/2018/">2018</a></li>
        <li><a href="http://example.com/2017/">2017</a></li>
        <li><a href="http://example.com/2016/">2016</a></li>
        <li><a href="http://example.com/2015/">2015</a></li>
        <li><a href="http://example.com/2014/">2014</a></li>
        <li><a href="http://example.com/2013/">2013</a></li>
        <li><a href="http://example.com/2012/">2012</a></li>
        <li><a href="http://example.com/2010/">2010</a></li>
        <li><a href="http://example.com/2009/">2009</a></li>
    </ul>
</div>

我不知道如何用 JS 做到这一点，但这个想象中的 JS 在我脑海中。

jQuery(document).ready(function() {
    var current = "<?php echo $current; ?>";

    var ArchiveList = document.querySelector('#archive_widget ul li').children;

    for (i = 0; i < productList.length; i++) {
        if (productList[i].text == current) {
            $(productList[i]).parent().addClass('active-menu');
        }
    }
});

谢谢。

Answer 1

您的代码存在一些问题:

1. document.querySelector 只选择一个元素，在您的情况下是第一个 LI
2. 从未声明变量 productList
3. LI 的父级始终是一个列表，而不是 LI 本身。

这是它的一个工作版本:

$(document).ready(function() {
    var current = "2014";


    var productList = $('#archive_widget ul li a'); // select all A elements

    for (i = 0; i < productList.length; i++) {
        if ($(productList[i]).text() === current) {
            $(productList[i]).parent().addClass('active-menu'); // Parent of A will be LI
        }
    }
});