CODEWITHSUNDEEP
jqueryforeach
Lech
Lech

Reputation: 61

Copy all the links to a one variable

I have to do such thing:

I have html list:

<ul>
   <li><a href="abc"></a></li>
   <li><a href="bac"></a></li>
   <li><a href="cab"></a></li>
</ul>

I would like to include in one variable all the links and separated them by a comma - resulting in variable string "abc, bac, cab."

I can display these link:

var link = $ ('ul li a') .attr ('href');
alert (link);

But I can't do a loop such as: for each 'li', copy the link, and then display: 'link1, link2, link3'

Upvotes: 4

Views: 107

Answers (7)

codeandcloud
codeandcloud

Reputation: 55250

In Vanilla JS 

var anchorCollection = document.getElementsByTagName("ul")[0]
    .getElementsByTagName("a");
var anchorArray =  [].slice.call( anchorCollection );
var result = anchorArray.map(function(anchor) {
    return anchor.getAttribute('href');
}).join(", ");
console.log(result);
<ul>
    <li><a href="abc">abc</a></li>
    <li><a href="bac">bac</a></li>
    <li><a href="cab">cab</a></li>
</ul>

Upvotes: 1

vivek
vivek

Reputation: 1605

May be this is the thing you want to do. Hope it helps you to achieve your goal.

<script>
    var hrefWithComma;
    $('a').each(function (index, value) {
        var link = $(this).attr('href');
        if (typeof hrefWithComma === "undefined")
        {
            hrefWithComma = link;
        }
        else
        {
            hrefWithComma = hrefWithComma + ',' + link;
        }

    });
    alert(hrefWithComma);
</script>

Upvotes: 0

alex
alex

Reputation: 490403

You can achieve that by using map(), followed by get() to get a real array, and then simply the join() method.

$('ul li a').map(function() { return this.get('href'); }).get().join(', ');

Upvotes: 2

Pranav C Balan
Pranav C Balan

Reputation: 115242

Use map() method in jQuery, which helps to generate an array based on the element. Later join the values using Array#join method. 

var link = $('ul li a')
  .map(function() { // iterate over and generate array
    return $(this).attr('href') // retrive href attribute value
  })
  .get() // retrieve the result as array from jQuery object
  .join(', '); // join the value for prefered output 

alert(link);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <a href="abc"></a>
  </li>
  <li>
    <a href="bac"></a>
  </li>
  <li>
    <a href="cab"></a>
  </li>
</ul>

Upvotes: 7

Sooraj
Sooraj

Reputation: 10567

This is what you are looking for. 

jQuery(document).ready(function(){
  var link = '';
jQuery('a').each(function(){
    link+=jQuery(this).attr('href');
})
alert(link);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
   <li><a href="abc"></a></li>
   <li><a href="bac"></a></li>
   <li><a href="cab"></a></li>
</ul>

Upvotes: 0

Ali BARIN
Ali BARIN

Reputation: 1920

You can do this with the following;

var links = Array.prototype.reduce.call(document.querySelectorAll('a'), function(prevLink, currLink) { return prevLink + ', ' +  currLink; });

Upvotes: 0

Anoop Joshi P
Anoop Joshi P

Reputation: 25537

You can do,

var links = $("ul li a").map(function() {
  return $(this).attr("href");
}).get().join(',');
alert(links)

USing map() followed by get(), you can get the url's to an array. Then join the elements with ,

Upvotes: 2

Related Questions