document.links

Question

我正在使用for循环遍历具有链接的列表，并且我试图获取href的值，但未成功。我可以通过这样做返回链接。

让我= $（'＃wizTabs li a'）;

但仍然无法获得href。

我已经尝试过me [i] .attr（“ href”），但遇到有关attr不是函数的错误。我也只尝试了$（this），但没有用

let me = $('#wizTabs li');

for (i = 0; i < me.length; i++) {
  console.log(me[i]);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-tabs" id="wizTabs">
  <li class="active"><a href="#pnlCustomerAddress" data-toggle="tab" aria-expanded="false">Customer Info</a></li>
  <li><a href="#pnlCustomerContacts" data-toggle="tab" aria-expanded="false">Contacts</a></li>
  <li><a href="#pnlShipToAddress" data-toggle="tab" aria-expanded="true">Ship To Info</a></li>
  <li><a href="#pnlImplementorAddress" data-toggle="tab">Company Info</a></li>
</ul>

Answer 1

使用for循环对jQuery集合进行循环将为您提供该集合的DOM元素，因此您不能在其上使用jQuery方法。您必须将DOM元素包装在$（）中才能在其上使用jQuery方法。

let me = $('#wizTabs li a').each(function(){
  console.log($(this).attr("href"));
});

//Javascript solution
for (i = 0; i < me.length; i++) {
  console.log(me[i].getAttribute("href"));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-tabs" id="wizTabs">
  <li class="active"><a href="#pnlCustomerAddress" data-toggle="tab" aria-expanded="false">Customer Info</a></li>
  <li><a href="#pnlCustomerContacts" data-toggle="tab" aria-expanded="false">Contacts</a></li>
  <li><a href="#pnlShipToAddress" data-toggle="tab" aria-expanded="true">Ship To Info</a></li>
  <li><a href="#pnlImplementorAddress" data-toggle="tab">Company Info</a></li>
</ul>

Answer 2

我在这里包括了两种不同的方法。

使用jQuery map，使用jQuery抓取数组并遍历数组，each做同样的事情。
在已获得的阵列上使用香草javascript。

注意，它们为href提供了不同的值，一个是完全合格的，一个不是。我确实修改了您的selector来定位anchor而不是list-item

let me = $('#wizTabs li a');
//using jquery map
$(me).map(function(idx, elem) {
  console.log($(elem).attr("href"));
});
//minimal changes to your code
for (i = 0; i < me.length; i++) {
  console.log(me[i].href);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-tabs" id="wizTabs">
  <li class="active"><a href="#pnlCustomerAddress" data-toggle="tab" aria-expanded="false">Customer Info</a></li>
  <li><a href="#pnlCustomerContacts" data-toggle="tab" aria-expanded="false">Contacts</a></li>
  <li><a href="#pnlShipToAddress" data-toggle="tab" aria-expanded="true">Ship To Info</a></li>
  <li><a href="#pnlImplementorAddress" data-toggle="tab">Company Info</a></li>
</ul>

Answer 3

document.links

最简单的HTMLCollections。

{ "id": 3, "parent": 1, "author": "admin", "author_is_staff": true, "content": "This is a test comment using the API rather than the Admin page, with author specified, with view changed" }使您可以链接到页面上的所有链接

以下衬板使用：

document.links将链接收集到NodeList中
document.links将NodeList转换为数组
Array.from()获取每个map() attr / prop的值。

[href]

var lnx = Array.from(document.links).map((A, i) => A.href);

console.log(lnx);

a::after {content:' 'attr(href)}

如何遍历列表并获取每个href值？

3 个答案:

document.links