获取我们所有链接的句柄：

Question

Lets say I have

<a href="/example1">ThisTextChanges</a>
<a href="/example2">ThisTextChanges</a>
<a href="/example3">ThisTextChanges</a>
<a href="/example4">ThisTextChanges</a>

I want to iterate through these and get the "ThisTextChanges" which are some numbers that changes, most accurately timers.

How can i achieve that? jquery is fine. They are inside a div with id "main_container". I need to put the text in a var so the href is importanto to know which var i use for each one.

Answer 1

让我们将任务分解为几个步骤：

获取我们所有链接（document.querySelectorAll）
了解如何获取a代码的当前文字（childNode[0].nodeValue）
将所有内容放在一起（Array.from，Array.map）

获取我们所有链接的句柄：

我们将使用document.querySelectorAll获取与我们的选择器匹配的所有节点的列表。这里我只是要使用选择器a，但您可能有一个类指定这些链接与页面上的其他链接：

var links = document.querySelectorAll('a');

获取链接文本

这个有点复杂。有几种方法可以做到这一点，但更有效的方法之一是遍历子节点（主要是文本节点），并为每个节点附加node.nodeValue。我们可能只使用第一个孩子的nodeValue就可以逃脱，但我们会建立一个循环并附加每个孩子的函数。

function getText(link){
    var text = "";
    for (var i = 0; i < link.childNodes.length; i++){
        var n = link.childNodes[i];
        if (n && n.nodeValue){
            text += n.nodeValue;
        }
    }
    return text;   
}

全部放在一起

要将它们放在一起，我们将使用Array.map将列表中的每个链接转换为其中的文本。这将为我们留下一系列字符串。但是，为了能够将其传递给Array.map，我们必须有一个数组，document.querySelectorAll会返回NodeList。因此，要将其转换，我们将使用Array.from将NodeList转换为数组。

＆＃13;

function getText(link){
    var text = "";
    for (var i = 0; i < link.childNodes.length; i++){
        var n = link.childNodes[i];
        if (n && n.nodeValue){
            text += n.nodeValue;
        }
    }
    return text;
}

var linkTexts = Array.from(document.querySelectorAll('a'))
                .map(getText);

console.log(linkTexts);

＆＃13;

<a href="1">this is text</a>
<a href="2">this is some more text</a>

＆＃13;

Answer 2

您可以迭代并将它们存储在数组

中

var arr = [];   

$("a").each(function(){

  arr.push($(this).text());
  console.log( arr );

});

Answer 3

你可以通过各种方式实现这一目标。此示例使用for loop。

var main_container = document.getElementById("main_container");
var items = main_container.getElementsByTagName("a");
for (var i = 0; i < items.length; ++i) {
      // do something.....
}

Answer 4

var array = [];
$('#main_container a').each(function(){
   array.push($(this).html());
});
console.log(array);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main_container">
      <a href="/example1">ThisTextChanges 1</a>
      <a href="/example2">ThisTextChanges 2</a>
      <a href="/example3">ThisTextChanges 3</a>
      <a href="/example4">ThisTextChanges 4</a>
    </div>

Answer 5

请尝试：

$('#main_container > a[href]').each(function() {
    var tes = $(this).attr('href').substring(1);
    window[tes] = $(this).text();
});

<a href="/example1">123</a>将生成名为example1的var，其值为123，依此类推。

Answer 6

您可以按如下方式在选择器中添加条件：

var array = [];
$('#main_container a[href="/example2"]').each(function(){
   array.push($(this).html());
});
console.log(array);

javascript解析来自<a href=""> links

6 个答案:

获取我们所有链接的句柄：

获取链接文本

全部放在一起