使用 jQuery 获取页面并提取具有特定类的所有链接答案

【问题标题】：Fetch page with jQuery and extract all links with specific class使用 jQuery 获取页面并提取具有特定类的所有链接
【发布时间】：2019-03-15 08:12:23
【问题描述】：

我想用 jQuery 获取一个页面，然后从响应中提取值，特别是我想使用特定的 class 访问 a 标记的所有 href 属性。

页面在同一个域中，所以不存在跨域问题。特定页面会返回一个 HTML 页面，但如果它能够与内容类型无关，那就太好了。

到目前为止我所拥有的：

// the page to fetch (index2.html). 
<html>
<a href="/example" class="getthis">click</a>
<a href="/example2" class="getthis">click2</a>
</html>

在这个页面上，这个 JS 代码可以正常工作：

$('.getthis').each(function(){
    alert($(this).attr('href'));
})

我现在尝试的是这样的：

$.get('/index2.html', function(data){
    $(data).find('.getthis').each(function(){
        alert($(this).attr('href'));
    })
});

获取页面工作正常，但提取数据不起作用。我尝试了很多关于这个想法的变体，但似乎都没有奏效。

如何使用 jQuery 获取 HTML 页面，然后处理响应的 DOM，例如提取具有特定类的所有元素？

我使用的是 jQuery 3.3.1，但如果解决方案适用于所有版本，那就太好了。

【问题讨论】：

什么是console.log(data)
@brk $.get('/index2.html', function(data){console.log(data)}) 打印出 index2.html 页面的 HTML 源代码。
你是在 dom 的任何地方添加这个 data 吗？
@brk 不，我发布的代码就是我所拥有的。是否需要附加数据？我更喜欢不需要的解决方案。

标签： javascript jquery html ajax

【解决方案1】：

通过 $.parseHTML() 将您的数据从 ajax 解析到 DOM 节点。并通过 .filter()

找到元素

$.get('/index2.html', function(data){
    data = $.parseHTML(data);
    $(data).filter('.getthis').each(function(){
        alert($(this).attr('href'));
    })
});

【讨论】：

完美，这正是我想要的。谢谢！
实际上，这仅在 a 标记位于顶层时才有效。例如，如果它在 div 内，filter 似乎不再起作用。我对 jQuery 不是很熟悉。有没有办法使用filter 访问一个类的所有元素，无论它们在 DOM 中的什么位置？
尝试将 .filter() 更改为 .find()
filter() 可以从当前元素集中捕获满足您条件的元素。 find() 可以捕获后代（具有祖先元素）。如果您的锚标记是顶级的，请使用 filter()。或者不，使用 find()
stackoverflow.com/questions/10378757/…

【解决方案2】：

我想，你可以这样解析数据

创建一个不可见的div

<div id="index2Data" style="display:none"></div>

并将数据设置到此

$.get('/index2.html', function(data){
    var container = document.querySelector('#index2Data');
    var root = container.createShadowRoot();
    $(root).html(data);
    $(root).find('.getthis').each(function(){
        alert($(this).attr('href'));
    })
});

【讨论】：

谢谢！这行得通，但如果我不需要使用不可见 div 的解决方法，但可以直接处理数据，我会更喜欢它。这似乎是一个常见的用例，但也许不可能？
我认为将加载的内容插入影子 DOM 比真实 DOM 更好，即使它是隐藏的。 stackoverflow.com/questions/38155218/…

【解决方案3】：

如果您想像示例中那样直接使用“data”和 typeof data ===“string”，这可能对您有用：

var links;

$.ajax('index2.html').done(function (data) {
    // note that data is just a string
    // get all a tags with specific class
    links = data.match(/<a.*class=['|"]getthis['|"].*>/gi);

    // iterate over links and ...
    links.forEach(function (item, index) {

        // remove everything in front of the href attr value ...
        var start = item.indexOf('href=') + 6;
        links[index] = item.substring(start);

        // then remove everything after the href attr value
        var end = links[index].indexOf('"') > - 1
        ? links[index].indexOf('"') 
        : links[index].indexOf('\'');

        links[index] = links[index].substring(0, end);
    });
});

console.log(links);

【讨论】：