Question

通常当您致电root.find('.test')时，它会返回 test内root类的所有元素。有没有办法将root视为可能的候选人？

换句话说，用html

<div id="x" class="test"></div>

，$('#x').find('.test')将返回1个元素而不是零。

如果我们对其进行概括，则在表达式root.find('condition1 condition2 condition3')中，我希望condition1也可以针对root进行测试。

我正在考虑创建一个自定义辅助方法，但也许有更优雅的东西。

谢谢！

Answer 1

没有 clean 方法可以做到这一点，你可以得到的最接近的是.andSelf()这样：

$('#x').find('.test').andSelf().filter('.test')

如果.andSelf()选择了一个选择器，它会稍微更清晰（并且效率更高，没有双重过滤），但只会更短一点。

使用内置方法的最快的（但有点混乱）方法涉及复制ID选择器，如下所示：

$('#x').find('.test').add($('#x').filter('.test'));
//or, shorter but slower:
$('#x').find('.test').add($('#x.test'));

You can compare the performance of all 3 here

Answer 2

澄清我认为您在问的内容......如果您搜索的元素已经是.find('.test a')，则您希望a仅搜索.test ... < / p>

以下是我对该功能的尝试：

$.fn.search = function(selector) {
    selector = selector || '';
    var parts = selector.split(/\s+/),
        l = parts.length,
        iAm = '',
        find = '';
    for (var x = l; x > 0; x--) {
        // countning backwards from the end of the list
        iAm = parts.slice(0, x).join(' ');
        find = parts.slice(x).join(' ');
        // if the 'iAm' portion of the selector matches this element
        if (this.is(iAm)) {
            // if there is no find portion (because we are the full selector) return ourself
            // but add the children that also match the last portion of the selector
            if (!find) return this.add(this.find(parts.slice(l-1).join('')));
            // return the .find() using only the parts of the selector needed
            return this.find(find);
        }
    }

    // otherwise, resort to original .find()
    return this.find(selector);
}

And the test fiddle

当然，由于这会分割选择器部分（.split(/\s+/)）的方式，因为其他原因（例如.something:has(.another .thing)或.something[value='1 2']类型）的选择器会因其中包含空格而中断选择器不能与此功能一起使用

Answer 3

我认为你的案子有这样的事情：

<div class="this">
    <div class="is" id="test">
        <div class="a">
            <div class="test">
            </div>
        </div>
    </div>
</div>

你有var $test = $('#test')。您想要$test.find('.this .is .a .test')并获得对该内部div的引用。

$.fn.search = function(selector) { return this.find('*').andSelf().filter(selector); }

然后你可以$test.search('.this .is .a .test')并获得对内部div的引用！ Demonstrated in this fiddle

当然，这比仅使用正确的选择器.find()要慢......

Answer 4

使用动态父级并找到它的内容。这可以包装在一个插件中。

$('#x').wrap('<div />').parent()
    .find('.test').css('margin-left', '20px') // affected have m-left: 20
.end().children().unwrap();

fiddle example

非标准查找方法

4 个答案: