Question

假设我们传递了以下元素：

var cachedElement = $('<div><p>Some text</p></div><aside>Some more text</aside>');

如果我知道元素中的内容，我可以轻松地遍历它。例如，要找到我可以使用的div：

cachedElement.filter('div');

并找到我可以使用的子元素：

cachedElement.find('p');

如果我不知道缓存元素的结构怎么办？如何搜索元素，可以是父元素，子元素或两者。

我想知道是否有一种方法可以帮助我。我不想将元素包装在div中并使用.find（）进行搜索。

我最好的解决方案是以下低效（和丑陋）选择器：

cachedElement.filter('selector_string').add(cachedElement.find('selector_string')).eq(0)

在我的特殊情况下，我只需要第一个元素。

有什么想法吗？感谢

Answer 1

我认为您不希望将内容包装在div中的任何理由：

$('<div />').append(cachedElement).find('selector_string').eq(0);

你可以做类似的事情：

cachedElement.find('*').andSelf().filter('selector_string').eq(0);

这将选择{em> cachedElement的所有后代并添加cachedElement。所以你会选择一个jQuery对象中的所有元素。但这对我来说似乎效率也很低。

Answer 2

如果你想要一些更清洁的东西，你可以采用你原来的方法，并把它变成一个插件：

(function( $ ) {
    $.fn.inclusiveFind = function( sel ) {
        return this.filter( sel ).add( this.find( sel ) );
    } 
})( jQuery );

然后像任何其他方法一样调用它：

var cachedElement = $('<div><p>Some text</p></div><aside>Some more text</aside>');

var div = cachedElement.inclusiveFind( 'div' ).eq(0);
var p = cachedElement.inclusiveFind( 'p' ).eq(0);

使用jQuery.merge()^[docs]方法可以提高性能：

(function( $ ) {
    $.fn.inclusiveFind = function( sel ) {
        return $.merge( this.filter( sel ), this.find( sel ) );
    } 
})( jQuery );

在缓存的jQuery对象中选择元素

2 个答案: