Question

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

该页面位于同一域中，因此没有跨源问题。特定页面返回一个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，但如果解决方案适用于所有版本，那就太好了。

Answer 1

通过 $。parseHTML（）将数据从ajax解析到DOM节点。然后通过 .filter（）

查找元素

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

Answer 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'));
    })
});

Answer 3

如果要像示例中那样直接使用“数据”和typeof数据===“字符串”，这可能对您有用：

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

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

3 个答案: