javascript 解析来自 <a href> 个链接的文本

Question

假设我有

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

我想遍历这些并得到 "ThisTextChanges" 一些变化的数字，最准确的是计时器。

我怎样才能做到这一点？ jquery 没问题。它们位于 ID 为 "main_container" 的 div 中。我需要将文本放在一个 var 中，因此 href 很重要，可以知道我为每个文本使用哪个 var。

Answer 1

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

var arr = [];   

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

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

});

Answer 2

您可以通过多种方式实现这一点。此示例使用 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 3

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

获取我们所有 link 的句柄 (document.querySelectorAll)
了解如何获取 a 标签的当前文本 (childNode[0].nodeValue)
把它们放在一起 (Array.from, Array.map)

获取我们所有 link 的句柄：

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

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

获取link

的文本

这个有点复杂。有几种方法可以做到这一点，但更有效的方法之一是遍历 child 节点（主要是文本节点），并为每个节点附加 node.nodeValue。我们可能只使用第一个 child 的 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 将列表中的每个 link 转换为其中的文本。这将为我们留下一个字符串数组。然而，为了能够将它传递给 Array.map 我们必须有一个数组，而 document.querySelectorAll returns 一个 NodeList 代替。所以要转换它，我们将使用 Array.from 将我们的 NodeList 变成一个数组。

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

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

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 的变量，值为 123，依此类推。

Answer 6

您可以在 a 选择器中添加条件，如下所示：

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

javascript 解析来自 <a href> 个链接的文本

javascript parse text from <a href> links

html

javascript

jquery

href

获取我们所有 link 的句柄：

获取link

把它们放在一起