将所有链接复制到一个变量答案

【问题标题】：Copy all the links to a one variable将所有链接复制到一个变量
【发布时间】：2016-10-24 09:06:19
【问题描述】：

我必须这样做：

我有 html 列表：

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

我想将所有链接包含在一个变量中，并用逗号分隔它们 - 生成变量字符串“abc, bac, cab”。

我可以显示这些链接：

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

但是我不能做一个循环比如：对于每个'li'，复制链接，然后显示：'link1,link2,link3'

【问题讨论】：

标签： jquery foreach

【解决方案1】：

在 jQuery 中使用 map() 方法，有助于根据元素生成数组。稍后使用 Array#join 方法加入值。

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>

【讨论】：

【解决方案2】：

你可以的，

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

使用map() 后跟get()，您可以将url 获取到一个数组中。然后用,加入元素

【讨论】：

【解决方案3】：

您可以通过使用map()，然后使用get() 来获得一个真正的数组，然后简单地使用join() 方法来实现。

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

【讨论】：

this.href 返回绝对 URL。这可能不是理想的行为。我认为应该注意:)
@A.Wolff 不错，我会调整

【解决方案4】：

在原版 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>

【讨论】：

还有一个建议 Array.prototype.slice.call => [].slice.call 或 Array.from()

【解决方案5】：

您可以通过以下方式做到这一点；

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

【讨论】：

【解决方案6】：

这就是你要找的。

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>

【讨论】：

【解决方案7】：

也许这就是你想做的事情。希望它可以帮助您实现目标。

<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>

【讨论】：