如何获取<a>在元素中找到的 href 列表？

Question

给定这样的html：

<tr>
<th style="padding-right:1em">Location</th>
<td>
<span class="location">Lower reaches of the <a href="/wiki/Geum_River" title="Geum River">Geum River</a>, <a href="/wiki/Korea" title="Korea">Korea</a></span>
</td>
</tr>

如何获得Geum_River和Korea？

这是我目前正在做的事情：

countryLinks = doSelect("Location").siblings('td').find('a').attr('href');
function doSelect(text) {
return $wikiDOM.find(".infobox th").filter(function() {
return $(this).text() === text;
});
}
function countryList() {
let pattern = new RegExp('/wiki/');
string = countryLinks;
countryListLinks = string.replace(pattern, '');
console.log(countryListLinks);
}
if (doSelect('Location').length > 0 && doSelect('Date').length > 0) {
countryList();
};

我正在从字符串中拆分/wiki/并且它可以工作，但我只得到了第一个Geum_River，而我希望所有<a>href.

Answer 1

你只选择了第一个<a>元素.href，.attr()返回一个值。if&& doSelect('Date').length > 0的第二个条件false在问题中给出 HTML。

您可以使用.map()和.get()返回<a>元素.href值的数组，然后将countryList函数传递给Array.prototype.forEach()以迭代.href值。

还应调整RegExp以替换所有字符，包括"wiki"'^.+/wiki/'。

function doSelect(text) {
return $(".infobox th").filter(function() {
return $(this).text() === text;
});
}
countryLinks = doSelect("Location").siblings('td')
.find('a').map(function(i, el) {return el.href}).get(); // .attr('href');
// we can pass this function to `.forEach()` or `.map()`
function countryList(string) {
let pattern = new RegExp('^.+/wiki/'); // adjust `RegExp`
// string = countryLinks;
countryListLinks = string.replace(pattern, '');
console.log(countryListLinks);
}
// the second condition is `false` given HTML at Question
if (doSelect('Location').length > 0 /* && doSelect('Date').length > 0 */) {
countryLinks.forEach(countryList);
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="infobox">
<tr>
<th style="padding-right:1em">Location</th>
<td>
<span class="location">Lower reaches of the <a href="/wiki/Geum_River" title="Geum River">Geum River</a>, <a href="/wiki/Korea" title="Korea">Korea</a></span>
</td>
</tr>
</table>

Answer 2

您的主要问题是当您专门调用countryLinks = doSelect("Location").siblings('td').find('a').attr('href');时，当您调用文档所述的最后一位.attr('href');时

说明：获取匹配元素集中第一个元素的属性值。

所以基本上，你得到一个链接的集合，然后将该集合减少到第一个元素并返回它的href属性。

以下是我如何使用.map()来执行此操作：

var $wikiDOM = $('.some-container');
var links = $.map($wikiDOM.find('td a'),function(link, i){
return (link.href || '').replace(/^.*[\/]/, '');
});
console.log(links);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="some-container">
<table>
<tr>
<th style="padding-right:1em">Location</th>
<td>
<span class="location">Lower reaches of the <a href="/wiki/Geum_River" title="Geum River">Geum River</a>, <a href="/wiki/Korea" title="Korea">Korea</a></span>
</td>
</tr>
</table>
</div>

Answer 3

你可以使用jQuery each(( 获取数组中的所有 href，然后使用 for 循环逐个显示。 这是代码：

var hrefs = new Array();
jQuery('.location').find('a').each(function() {
hrefs.push(jQuery(this).attr('href'));
});
function countryList() {
let pattern = new RegExp('/wiki/');
for(var i=0; i < hrefs.length ; i++){
string = hrefs[i];
var countryListLinks = string.replace(pattern, '');
alert(countryListLinks);
}
}
countryList();

完整的代码，应该看起来像这样：

function doSelect(text) {
return $wikiDOM.find(".infobox th").filter(function() {
return $(this).text() === text;
});
}
var hrefs = new Array();
jQuery('.location').find('a').each(function() {
hrefs.push(jQuery(this).attr('href'));
});
function countryList() {
let pattern = new RegExp('/wiki/');
for(var i=0; i < hrefs.length ; i++){
string = hrefs[i];
var countryListLinks = string.replace(pattern, '');
console.log(countryListLinks);
}
}
if (doSelect('Location').length > 0 && doSelect('Date').length > 0) {
countryList();
};

var hrefs = new Array();

jQuery('.location').find('a').each(function() {
hrefs.push(jQuery(this).attr('href'));
});

function countryList() {
let pattern = new RegExp('/wiki/');
for(var i=0; i < hrefs.length ; i++){
string = hrefs[i];
var countryListLinks = string.replace(pattern, '');
alert(countryListLinks);
}
}

countryList();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<tr>
<th style="padding-right:1em">Location</th>
<td>
<span class="location">Lower reaches of the <a href="/wiki/Geum_River" title="Geum River">Geum River</a>, <a href="/wiki/Korea" title="Korea">Korea</a></span>
</td>
</tr>

Answer 4

首先，我将在您的 span 元素上弹出一个id，以便我可以在我的脚本中轻松找到它。

<span id="locations"

接下来，我将删除您的实现，而是使用id="locations"遍历span的子元素。接下来，我将获取我们想要的这些元素的 href 的子字符串，并将它们推送到数组中。

var locations = document.getElementById("locations").getElementsByTagName('a');
var rawLocations = [];
for (i in locations) {
if (locations[i].href) {
var lastIndex = locations[i].href.lastIndexOf('/') + 1;
rawLocations.push(locations[i].href.substring(lastIndex));
}
}

现在，console.log(rawLocations);给了我们想要的东西：

(2) ["Geum_River", "Korea"]

Answer 5

这并不像我想象的那么容易：-(

但是我们来了： 缓存元素，您可以执行 QuerySelectorAll 并遍历 节点列表，但让我们保持简单 var ts = document.querySelector('a'(;

// This is caching the href attribute from the link
var garbage = ts.href;
// here you take the link and run the native string method 
// to find the lastIndexOf, this is great if you suck at regex like myself
var n = garbage.lastIndexOf('/');
Here we extract only the part after lastIndexOf and cache it in "result"
var result = garbage.substring(n + 1);
alert(result);