CODEWITHSUNDEEP
javascriptjquery
Chris
Chris

Reputation: 3129

How to loop through list and get every href value?

I am using a for loop to loop through a list that has links and I am trying to get the href's value's and not being successful. I can return the links by doing this..

let me = $('#wizTabs li a');

but not able to still get the href.

I have tried me[i].attr("href") and I get an error about attr not being a function. I also tried just $(this) and that didn't work

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>

Upvotes: 0

Views: 2364

Answers (3)

Stakvino
Stakvino

Reputation: 682

looping a jQuery collection with a for loop will give you the DOM elements of this collection and therefore you cannot use jQuery methods on them. you will have to wrap the DOM element in a $() in order to be able to use jQuery methods on it.

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>

Upvotes: 7

zer00ne
zer00ne

Reputation: 43870

document.links

The most easiest HTMLCollections.

document.links gets you all links on a page

The following one liner uses:

  • document.links to gather the links into a NodeList

  • Array.from() to convert the NodeList into an array

  • map() to get the value of each [href] attr/prop.

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

console.log(lnx);
a::after {content:' 'attr(href)}
<a href="#/"></a><br>
<a href="https://google.com"></a><br>
<a href="https://stackoverflow.vom"></a><br>
<a href="https://jsfiddle.net"></a><br>
<a href="https://next.plnkr.co"></a><b>
<a href="https://cdnjs.com"></a><br>
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/links">document.links</a><br>

Upvotes: 1

Steve0
Steve0

Reputation: 2243

I have included here 2 different ways to do it.

  1. Using jQuery map, using jQuery to grab the array and loop through it, each does the same thing.
  2. Using vanilla javascript on the array you already got.

NOTE they provide different values for href, one fully qualified and one not. I did modify your selector to target the anchor and not the 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>

Upvotes: 1

Related Questions