如何选择列表（li）内的所有链接（a）答案

【问题标题】：How to select all links (a) inside list (li)如何选择列表（li）内的所有链接（a）
【发布时间】：2017-07-25 07:25:54
【问题描述】：

我有 jq 代码我需要转换为 ->js 对我来说这没有意义（因为 jq 是 js），代码更长，很耗时（I'我不是程序员）并给出完全相同的效果......更不用说浏览器兼容性了。但是……

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

在 jq 中简单的一行 $('li').find('a');即使 li 和 like 之间有更多内容，它也可以工作：

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

什么是纯js中的jq代码等价物？我确实尝试了 querySelector、querySelectorAll、filter 等都无济于事（对我来说，它仅在 a 是 li 的直接子级时才有效）。

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

【问题讨论】：

试试这个 $('li a')。
它的 jq - 我需要 js 代码。你可能是说 document.querySelectorAll('li > a');我试过了。不工作。
嘿——我提交了一个似乎有效的答案。如果它解决了问题，请确保接受它。

标签： javascript jquery type-conversion

【解决方案1】：

$("li a").each(function() {
    $(this).text("new text");
});

Each for object?

var links = document.getElementById("yourid").getElementsByTagName("a");

for(var i = 0; i < links.length; i++){
    do something
}

【讨论】：

我再次需要 JS。
现在两个版本
如果有两个版本（用于 jq 和 js），请不要投反对票。谢谢！

【解决方案2】：

您正在寻找document.querySelectorAll()。这允许以与 CSS 类似的方式获取所有元素。因此，例如，如果您想在<li> 中获取所有<a>，您的查询自然是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 非压缩源并查找您想要的代码，这也可能有效。

【讨论】：

问题是用jquery标记的，所以我猜他不是在找querySelectorAll
@Psi：您需要再次阅读问题。缓慢而彻底。而且，是的，这个问题也被标记为javascript。
@weary：删除图像，并将代码包含在答案本身中。更好的是，创建一个 sn-p。
@Abhitalks 图片是为了让视觉清晰，它是如何工作的。代码只有一行：document.querySelectorAll("string")，它返回一个数组。
阅读 jQuery 源代码来学习如何编写 JS 并不是一个好主意。最好通过文档和示例简单地学习编写干净的代码。