使用完全限定的URL在Sizzle中选择元素的方法 [英] Method for selecting elements in Sizzle using fully-qualified URLs

问题描述

在最近编写脚本时，我遇到了一个特殊的细微差别使用 href 属性，Sizzle如何工作。具体来说，在 href 上使用属性选择器，Sizzle将使用实际属性值：

While working on a script recently, I came across a peculiar nuance of how Sizzle works with the href attribute. Specifically, using an attribute selector on an href, Sizzle will use the actual attribute value:

// Will not find <a href="index.html">...
$('a[href="http://www.example.com/index.html"]')

Sizzle使用 .getAttribute（） 而不是 elem.href （或更确切地说， elem [' href'] ，如 Sizzle所做的最多案件）; elem.href 将提供完全限定的网址。

Sizzle uses .getAttribute() instead of elem.href (or more precisely, elem['href'], as Sizzle does in most cases); elem.href would provide the fully-qualified URL.

为了更多地理解这一点，我创造了一个小提琴尝试不同形式的网址。在测试过程中，我发现了设置 href <（显而易见的）解决方案 code>等于自己：

To understand this a bit more, I created a fiddle to try different forms of URLs. In the process of testing, I discovered the (obvious) "solution" of setting the href equal to itself:

$('a').each(function(){
    this.href = this.href;
});

毫不奇怪，更新元素以反映的完全限定网址this.href 提供。还有其他方法我发现工作（任何更新元素的 href 属性），但他们只是将上述方法移植到其他形式，或涉及类似的东西 .filter（）（演示）：

Which, unsurprisingly, updates the element to reflect the fully-qualified URL that this.href provides. There are other ways I've found that work (any that update the href attribute of an element), but they just port the above approach to other forms, or involve something like .filter() (demo):

var matches = $('a').filter(function(){
    var window_location = 'http://example.com/services.html';
    return window_location == this.href;
});

我之所以这样说是做 el.href = el.href选择之前是某种意义上的解决方法（我认为不是一个很好的选择）。例如，如果可以，运行对一组元素的检查以查找是否包含与当前URL（或另一个URL）的匹配链接更容易：

The reason I say this is that doing el.href = el.href before selecting is a workaround in a sense (and one I don't think is a great alternative). For instance, running a check on a set of elements to find if any contain a matching link to the current URL (or another URL) is simpler to do if you can:

$links.not('[href="' + window.location.href + '"]')

有没有办法做到这一点，而不必诉诸更新属性，或编写额外的代码来管理支票？有没有一种我忽略的方法，不涉及修改Sizzle的工作方式 ^ ？

Is there a way to do this without having to resort to "updating" the attributes, or writing additional code to manage the check? Is there a way I've overlooked that doesn't involve modifying how Sizzle works ^?

^注意 ：与仅添加表达式相比，修改实际源代码是一个（坏）想法：

^ Note: Modifying the actual source code would be a (bad) idea compared to just adding an expression:

$.extend($.expr[':'], {
    url: function(elem, i, match){
        return elem.href === match[3];
    }
});

var $matched = $('a:url(http://test.com/index.html)');

http://jsfiddle.net/yt2RU/

（另外，在Sizzle还有其他类似非典型行为的属性吗？）

(And as an aside, are there other attributes with similar untypical behavior in Sizzle?)

推荐答案

我相信我已经得到了这个问题的答案...

I believe I've got the answer to this question...

使用 表达式 ：

jQuery.extend(jQuery.expr[':'], {
    url: function(elem, i, match){
        return elem.href === match[3];
    }
});

var $matched = jQuery('a:url(http://test.com/index.html)');

http://jsfiddle.net/yt2RU/

或者，如评论中所述， $。filter（ ）可以使用：

Or, as it was noted in the comments, $.filter() could be used:

var $matched = $('a').filter(function(){
    if (this.href == 'http://test.com/index.html') {
        return true;
    }
    return false;
});

http://jsfiddle.net/dMuyj/

如果 querySelector（） 和 querySelectorAll（） 本机不可用，并且这两个都有效与jQuery的选择器引擎相同（不足为奇）。

And that jQuery only falls back to Sizzle if querySelector() and querySelectorAll() are not available natively, and that both of these work the same as jQuery's selector engine (not surprising).

总和是，如果你需要这种类型的选择器，你需要一个表达式或过滤器，并使用 elem.href 用于比较，而非 getAttribute（） 。

The sum total is, you either need an expression or a filter if you desire this type of selector, and use elem.href for the comparison, not getAttribute().

这篇关于使用完全限定的URL在Sizzle中选择元素的方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！