我有一个静态生成的未排序列表,需要为给定的子 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');
}
}
});
谢谢。
最佳答案
您的代码存在一些问题:
- 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
}
}
});
关于JavaScript:查询子项并修改父项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53110801/