Question

我有一个静态生成的未排序列表，需要针对给定的child-href-match修改父li。此操作应通过渲染而不是通过交互来执行。我正在使用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

您的代码存在一些问题：

document.querySelector仅选择一个元素，在您的情况下为第一个LI
从未声明变量productList
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
        }
    }
});

Answer 2

理想情况下，这将在SSR时设置，但是尝试很少：

$(document).ready(function () {
  let current = "2015";//set server-side
  let found = false;
  $("#archive_widget").children('ul').children("li").children("a").each(function () {
    if (!found && $(this).text() === current) {
      $(this).parent().addClass('active-menu');
      found = true;
    }
  });
});

.active-menu { background: red }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

我希望这会有所帮助！

Answer 3

将ArchiveList更改为productList，因为这就是您的代码正在使用的内容，并使用.textContent而不是.text。

您的查询选择器仅匹配一个元素。您要匹配所有父元素为li的锚元素，因此请使用document.querySelectorAll：

document.querySelectorAll('#archive_widget ul li a');

固定代码：

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

    var productList = document.querySelectorAll('#archive_widget ul li a');

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

JavaScript：查询子级并修改父级

3 个答案: