javascript - 是否可以创建导航祖先的自定义 jQuery 选择器？例如:closest or :parents selector

Question

我写了很多 jQuery 插件并且有我一直使用的自定义 jQuery 选择器，比如 :focusable和 :closeto提供常用的过滤器。

例如:focusable 看起来像这样

jQuery.extend(jQuery.expr[':'], {
    focusable: function (el, index, selector) {
        return $(el).is('a, button, :input[type!=hidden], [tabindex]');
    };
});

并且像任何其他选择器一样使用:

$(':focusable').css('color', 'red');  // color all focusable elements red

我注意到没有可用的 jQuery 选择器可以导航回祖先。我认为这是因为它们旨在遵循向下钻取的基本 CSS 选择器规则。

以这个例子为例:找到具有焦点的输入的标签:

$('input:focus').closest('.form-group').find('.label');

我需要用于插件的等效类型的复杂选择器，因此将这样的选择器提供为单个字符串会很有用(因此它们可以作为插件的选项提供)。 p>

例如类似于:

$('input:focus < .form-group .label');

或

$('input:focus:closest(.form-group) .label');

注意:请假设更复杂的操作并且需要祖先导航(我意识到这个特定的例子可以用 has 完成，但这没有帮助)。

例如它还需要支持这一点:

options.selector = ':closest(".form-group") .label';

$('input').click(function(){
    var label = $(this).find(options.selector);
});

是否可以扩展 jQuery 选择器来扩展搜索行为(而不仅仅是添加更多 bool 过滤器)？您如何扩展自定义搜索行为？

更新:

看来一个完整的自定义选择器(如 < )不像向 jQuery 的 Sizzle 解析器添加一个伪选择器那么容易。我目前正在看这个 Sizzle documentation ，但我发现与 jQuery 版本不一致。 (例如，运行时不存在 Sizzle.selectors.order 属性)。

作为引用，jQuery 存储 Sizzle在其 jQuery.find属性(property)和Sizzle.selectors在其 jQuery.expr属性(property)。

到目前为止我已经添加了这个:

 jQuery.expr.match.closest = /^:(?:closest)$/;
 jQuery.expr.find.closest = function (match, context, isXML){
     console.log("jQuery.expr.find.closest");
 };

并用一个简单的测试调用它:http://jsfiddle.net/z3vwk1ko/2/

但它永远不会到达 console.log 语句，我仍然得到 "Syntax error, unrecognized expression: unsupported pseudo: closest" .在 jQuery 内部跟踪时，它试图将其应用为 filter而不是 find ，所以我遗漏了一些关键部分。

更新 2:

选择器的处理从右到左(参见下面 jQuery 1.11.1 的摘录)所以如果上下文中不存在最后一个参数，它会提前中止。这意味着在我们想要在祖先的另一个 DOM 分支中查找元素的常见情况下，当前的 jQuery Sizzle 代码不会发生向上导航:

// Fetch a seed set for right-to-left matching
i = matchExpr["needsContext"].test(selector) ? 0 : tokens.length;
while (i--) {
    token = tokens[i];

    // Abort if we hit a combinator
    if (Expr.relative[(type = token.type)]) {
        break;
    }
    if ((find = Expr.find[type])) {
        // Search, expanding context for leading sibling combinators
        if ((seed = find(
            token.matches[0].replace(runescape, funescape),
            rsibling.test(tokens[0].type) && testContext(context.parentNode) || context
        ))) {

            // If seed is empty or no tokens remain, we can return early
            tokens.splice(i, 1);
            selector = seed.length && toSelector(tokens);
            if (!selector) {
                push.apply(results, seed);
                return results;
            }

            break;
        }
    }
}

看到这个我很惊讶，但现在意识到它使规则引擎更容易编写。但是，这确实意味着我们需要确保选择器的右端尽可能具体，因为它首先被评估。之后发生的一切都只是结果集的渐进 trim (我一直认为选择器中的第一项必须更具体以提高效率)。

Answer 1

基于大量评论，以及关于为什么这是不可能的的详细解释，我想到我想要的目标可以通过 $(document).find() 来实现。 ，但有一些目标元素的概念。也就是说，在选择器中以某种方式定位原始查询元素。

为此，我想到了以下内容，一个 :this选择器，它是这样工作的(没有双关语意):

// Find all labels under .level3 classes that have the .starthere class beneath them
$('.starthere').findThis('.level3:has(:this) .label')

这让我们现在可以有效地向上搜索 DOM，然后向下搜索单个选择器字符串中的相邻分支!即它做的工作与此相同(但在单个选择器中):

$('.starthere').parents('.level3').find('.label')

步骤:

1 - 添加一个新的 jQuery.findThis方法

2 - 如果选择器有 :this , 替换 id 搜索并从 document 搜索相反

3 - 如果选择器不包含 :this通常使用原来的过程 find

4 - 使用像 $('.target').find('.ancestor:has(:this) .label') 这样的选择器进行测试在目标元素的祖先中选择一个标签

这是基于评论的修订版本，它不会替换现有的查找内容并使用生成的唯一 ID。

JSFiddle:http://jsfiddle.net/TrueBlueAussie/z3vwk1ko/36/

// Add findThis method to jQuery (with a custom :this check)
jQuery.fn.findThis = function (selector) {
    // If we have a :this selector
    if (selector.indexOf(':this') > 0) {
        var ret = $();
        for (var i = 0; i < this.length; i++) {
            var el = this[i];
            var id = el.id;
            // If not id already, put in a temp (unique) id
            el.id = 'id'+ new Date().getTime();
            var selector2 = selector.replace(':this', '#' + el.id);
            ret = ret.add(jQuery(selector2, document));
            // restore any original id
            el.id = id;
        }
        ret.selector = selector;
        return ret;
    }
    // do a normal find instead
    return this.find(selector);
}

// Test case
$(function () {
    $('.starthere').findThis('.level3:has(:this) .label').css({
        color: 'red'
    });
});

已知问题:

• 这会留下一个空白 id没有 id 的目标元素的属性开头的属性(这没有问题，但不像我想要的那样整洁)

• 由于它必须从文档中搜索的方式，它只能模拟 parents()而不是 closest() , 但我觉得我可以使用类似的方法并添加 :closest()此代码的伪选择器。

---

第一个版本如下:

1 - 保存 jQuery 的 find引用方法

2 - 替换为新的 jQuery.find方法

3 - 如果选择器有 :this , 替换 id 搜索并从 document 搜索相反

4 - 如果选择器不包含 :this通常使用原来的过程 find

5 - 使用像 $('.target').find('.ancestor:has(:this)') 这样的选择器进行测试选择目标元素的祖先

JSFiddle:http://jsfiddle.net/TrueBlueAussie/z3vwk1ko/24/

// Save the original jQuery find we are replacing
jQuery.fn.findorig = jQuery.fn.find

// Replace jQuery find with a custom :this hook
jQuery.fn.find = function (selector) {
    // If we have a :this selector
    if (selector.indexOf(':this') > 0) {
        var self = this;
        var ret = $();
        for (var i = 0; i < this.length; i++) {
            // Save any existing id on the targetted element
            var id = self[i].id;
            if (!id) {
                // If not id already, put in a temp (unique) one
                self[i].id = 'findme123';
            }
            var selector2 = selector.replace(':this', '#findme123');
            ret = ret.add(jQuery(selector2, document));
            // restore any original id
            self[i].id = id;
        }
        ret.selector = selector;
        return ret;
    }
    return this.findorig(selector);
}

// Test case
$(function () {
   $('.starthere').find('.level3:has(:this)').css({
        color: 'red'
    });
});

这是基于 6 小时的 jQuery/Sizzle 源代码苦读，所以要温柔。总是很高兴听到改进此替代品的方法 find因为我是 jQuery 内部的新手 :)

现在意味着我可以解决如何做原始标签示例的初始问题:

options.selector = ".form-group:has(:this) .label";

$('input').click(function(){
    var label = $(this).find(options.selector);
});

例如http://jsfiddle.net/TrueBlueAussie/z3vwk1ko/25/