jQuery 找到自我

Question

这可能听起来很奇怪，但我正在开发一个需要在 div 或 div 本身中查找元素的插件。

该脚本根据用户选择查找元素，但内容（包括标记）是可变的。因此，脚本将按如下方式查找元素：

$('.block').find(selector); // selector set by user

但是没有一种简单的方法可以让选择器选择“.block”。 在使用 find 之前选择父级并不是一个解决方案，因为有多个 '.块'元素。

我知道扩展 expr[":"] 选择器不起作用，因为它只查找子项。但是，我确实找到了一种“鸭子冲床”这种方法，通过创建一个 ':self' 选择器：

(function($){
    var orig = $.fn.find;

    $.fn.find = function(sel){
        return (sel === ':self') ? this : orig.call(this,sel);
    }

})(jQuery)

但这似乎有点过头了。对于每个查找函数，它都会稍微减慢 jQuery 的处理速度。还有其他方法可以做到这一点吗？

---

感谢您的回答！但我最终这样做了：

var b = $('.block'),
 el = (b.is(selector)) ? b : b.find(selector);

Answer 1

使用 find('*') 的方法会消耗更多的 CPU 资源，我建议：

$('.block').find(selector).add($('.block').filter(selector));

Answer 2

我也遇到过这个问题。我像这样解决了它（基本上是 Romans Malinovskis 作为 jquery 插件的解决方案）：

$.fn.findAll = function(selector) {
    return this.find(selector).add(this.filter(selector));
};

Answer 3

已编辑：

您可以将所有选择器“*”与 andSelf 结合使用来获取包含元素及其所有子子元素的选择。然后您可以在所选选择器上过滤（）该选择。

<style type="text/css">li {background-color: white;}</style>
<script type="text/javascript">
$(function () {
  $('div').find('*').andSelf().filter(selector).css('background-color','blue');
}
</script>
<div>
This is a test
  <ul>
    <li class="test">This is a test</li>
    <li>This is a test</li>
    <li class="test">This is a test</li>
    <li>This is a test</li>
    <li class="test">This is a test</li>
    <li>This is a test</li>
  </ul>
</div>

如果合适的话，应该更改所有 .test 对象的背景以及所选的初始 div。但我不确定我的答案的表现。

示例： http://jsfiddle.net/7A9JJ/2/

编辑
或者你可以只做 $('div, div *').filter(selector);

Answer 4

从 1.8 开始你可以做

$('.block').find(selector).addBack(selector);

Answer 5

我不知道为什么这需要如此复杂。这一切都可以通过一个简单的多重选择器来完成：

$(selector + '.block, .block ' + selector);

没有find ，过滤器，也不添加来考虑，加上它的在许多（大多数？）现代浏览器中性能更高（使用 jQuery 1.9 进行测试）。

注意事项：

• 您可能需要事先修剪用户提供的选择器，因为尾随空格在这里有意义；
• 该解决方案在某种程度上特定于OP的问题，如果目标div的选择器以元素名称开头，即selector + 'th, th ' + 选择器不会产生有效的选择器，则该解决方案将不起作用；在这种情况下，我建议使用一种更通用的解决方案；
• 您仍然可以坚持使用多选择器方法，使用一种极其 HACKY、完全不推荐的方法，该方法涉及使用 :not() 伪选择器： 查看工作演示 和 可怕的，可怕的表现。

Answer 6

我创建 jquery 方法 findAll 如下所示，

$.fn.findAll = function ( selector ) {
    if ( this.length === 0 ) {
        return this;
    } else if ( this.length === 1 ) {
        return this.filter( selector ).add( this.find( selector ) );
    } else {
        var rtn = this.filter( selector );
        this.each( function () {
            rtn.add( $( this ).find( selector ) );
        } );
        return rtn;
    }
}

您可以像下面一样使用它

$resultSet.findAll(selector)