Question

我有变量（通过AJAX加载），其中包含一段HTML文档（但不包含带有html，head和body的整个文档。

我想以这种方式改变它：

对于此变量中指向同一域添加的每个链接 class internal_link。

为了过滤整个文档中的链接，我使用了例如：

$('a').filter(function() {
        return this.hostname && this.hostname === location.hostname;
    }).addClass('internal_link');

它没有任何问题。但是我不知道如何在整个文档中使用这个代码，而是在变量上使用这个代码来改变它的值。

我尝试了以下代码：

html = data.content;

alert(html);

$(html).find('a').filter(function() {
    return this.hostname && this.hostname === location.hostname;
}).addClass('internal_link');

alert (html);

但它似乎不起作用。当我运行第二个警报时，internal_link类不在html中。

怎么做？

示例页面脚本：

<html>
<head>
    <script src="jquery-1.11.1.min.js"></script>
</head>
<body>
<script>
    $().ready(function() {

        html = '<a href="http://localhost">test</a>';

       alert(html);

        $(html).find('a').filter(function() {
            return this.hostname && this.hostname === location.hostname;
        }).addClass('internal_link');

        alert (html);


    });
</script>
</body>
</html>

Answer 1

问题是锚是根元素，find()只能找到孩子。

html = '<a href="http://localhost">test</a>';

所以$(html).find('a')不起作用，因为锚不是孩子。

您可以使用filter()代替，但仅获取根元素，如果您同时拥有根元素和子元素，则会失败，

尝试这样

var div = $('<div />').html(html); 

div.find('a').filter(function() {
    return this.hostname && this.hostname === location.hostname;
}).addClass('internal_link');

创建一个新的父元素，因此一旦将内容附加到容器元素，您就确定html中的任何锚点都是子节点。

Answer 2

你的$（html）不是html-markup中的对象。确保您要查找的代码是标记的一部分。

使用以下设置将起作用：

$('html').find('a').filter(function() {
    return this.hostname && this.hostname === location.hostname;
}).addClass('internal_link');

除此之外，您可以在文档上启动完整功能，以确保加载标记：

$(document).ready(function(){
    $('html').find('a').filter(function() {
        return this.hostname && this.hostname === location.hostname;
    }).addClass('internal_link');
});

更改变量中的链接

2 个答案: