我可以同时使用 .find() 和 .filter() 吗？

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 不是，因此被跳过了。

我是否可以同时定位链接 A 和链接 B 而无需使用 .find() 和 .filter() 重复我的代码？

这是我制作的代码笔：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>');