Question

我有一个包含以下HTML的jQuery对象。它看起来像这样。

var myObject = $('<div><a href="#">Link A</a></div><a href="#">Link B</a>.');

我想使用.each（）修改其中的所有<a>标记，如下所示：

myObject.find('a').each(function () {
    $(this).text( "Modified Link Text" );
});

我希望最终结果是链接A和链接B修改了它们的文本。不幸的是，如果我理解正确的话，.find（）只会查看顶级元素的后代。链接A嵌套在<div>标记中，因此它可以正常工作。但链接B不是并且被跳过。

无论如何，我可以使用.find（）AND .filter（）重复我的代码而无需链接A和链接B吗？

这是我制作的codepen：http://codepen.io/jimmykup/pen/DKgJn?editors=101

Answer 1

这里有3条建议。你可以

A）创建一个DOM节点，在其中找到你的元素：

var myObject = $('<div><a href="#">Link A</a></div><a href="#">Link B</a>.');

$('<div>').append(myObject).find('a').each(function () {
    $(this).text( "Modified Link Text" );
});

B）将addBack()与选择器一起使用：

myObject.find('a').addBack('a').each(function () {
    $(this).text( "Modified Link Text" );
});

C）使用.add()

直接添加已过滤的元素

myObject.find('a').add(myObject.filter('a')).each(function () {
    $(this).text( "Modified Link Text" );
});

注意：如果您只更改文本，则循环无效。

Answer 2

通常的做法是将它包装在一个额外的元素中，然后只使用find，因为它无论如何都会排除父元素

$('<div />').append(myObject).find('a').text( "Modified Link Text" );

Answer 3

您可以使用addBack这样的过滤器：

myObject.find('a').addBack('a').each(...)

这是我用来做jQuery的findAndSelf扩展（因为我经常使用这个模式）：

jQuery.fn.findAndSelf = function(selector){
   return this.find(selector).addBack(selector);
};

您的代码将如下所示：

myObject.findAndSelf('a').each(function () {
    $(this).text("Modified Link Text");
});

Answer 4

将所有字符串放在一个父div中，如下所示：

var myObject = $('<div><div><a href="#">Link A</a></div><a href="#">Link B</a>.</div>');

我可以同时使用.find（）和.filter（）吗？

4 个答案: