如何选择列表内的所有链接(a)(li)

Question

我得到了我需要转换为 - > js < - 的jq代码.对我来说它没有意义(因为jq是js),代码更长,耗时(我不是程序员)并且给出完全相同的效果......更不用说浏览器兼容性了.但...

我想选择列表中的所有链接(a)元素(li)迭代它们,更改值等等.

在jq中有一行简单的行$('li').find('a'); 即使li和之类的东西更多,它也能正常工作:

<li>
<div>
<a href=''>inside div</a>
</div>
</li>

什么是普通js中的jq代码？我确实尝试了querySelector querySelectorAll,filter等无济于事(对我而言,只有当a是li的直接子项时才有效).

顺便说一句,我在寻找答案时找到了一个很好的页面 - http://youmightnotneedjquery.com/#contains_selector但我仍然遇到这个问题...所以任何建议都值得赞赏.

Answer 1

你在找document.querySelectorAll().这允许以类似的方式获取CSS所有元素.所以,例如,如果你想要全部<a>内部<li>,你的查询自然会li a,然后使用document.querySelectorAll("li a").

此函数返回元素的NodeList,您需要遍历它以获取每个元素.它就像一个数组 - 您a[i]用来访问带索引的元素i并用于a.length访问NodeList的大小.这是一个视觉清晰的图像:

这是您的解决方案的代码:

var a = document.querySelectorAll("li a");
for(var i = 0; i < a.length; i++){
    a[i].innerHTML   = "If you want to change text of an element";
    a[i].style.color = "red";
}

编辑:如果您希望将来将更多jQuery代码转换为Javascript,请查看jQuery非缩小源并查找所需的代码,这可能也有效.