Question

我一直在尝试一些不同的方法来过滤我的html中特定节点的查找。

以下是一些示例html：

<body>
    <div ui:component="component1"></div>
    <ul ui:component="component2"></ul>
    <article ui:component="component3"></article>
</body>

我通过一个简单的过滤器成功地匹配了项目：

// returns div, ul, article
$('[ui\\:component]').each();

但是，当我开始基于父节点过滤它时，它开始失败。我试过了：

$('[ui\\:component]', $('body'));   // returns []
$('body').find('[ui\\:component]'); // returns []
$('body').filter('[ui\\:component]'); // returns []
$('body').find('*').filter('[ui\\:component]'); // returns []

我在这里做错了什么？起初我以为它可能是ui命名空间，但是将它添加到html doc或body中似乎没有做任何重要的事情。非常感谢

以下全部资料来源：

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
    <div ui:component="component1"></div>
    <ul ui:component="component2"></ul>
    <article ui:component="component3"></article>
</body>
<script type="text/javascript">
$(document).ready(function() {

    // returns div, ul, article
    console.log($('[ui\\:component]'));

    // these all return nada
    console.log($('[ui\\:component]', $('body')));
    console.log($('body').find('[ui\\:component]'));
    console.log($('body').filter('[ui\\:component]'));
    console.log($('body').find('*').filter('[ui\\:component]'));
});
</script>
</html>

Answer 1

我猜这是因为当你这样做时：

$('[ui\\:component]')

... Sizzle将选择器传递给浏览器的document.querySelectorAll()方法（如果可用），有效地绕过了Sizzle。

当您执行.find()或.filter()时，正在使用Sizzle。

所以我猜Sizzle不支持选择器中的某些内容，而是querySelectorAll()。也许是:。

我想你会发现这个：

document.querySelectorAll('[ui\\:component]').length

和此：

$('[ui\\:component]').length

...会给你类似的结果

修改

如果有帮助，连字符似乎工作正常。

$('body').find('[ui-component]').length

HTML

<ul ui-component="component2"></ul>

Answer 2

我发现使用jQuery执行此操作的最佳方法是编写自定义选择器：

$.expr[':'].nsattr = function(obj, ix, meta) {
    var attr = meta[3];

    return (obj.getAttribute(attr) ? true : false);
};

然后您可以使用

调用此方法

$(document.body).find(':nsattr(ui:component)');
$(document.body).children().filter(':nsattr(ui:component)');
$(':nsattr(ui:component)', document.body);

显然，这不是一种巧妙的方式。我怀疑这是jQuery的一个错误，你可能需要报告它。

Answer 3

尝试使用<div id="component"></div> ..

JQuery：查找/过滤上下文中的属性

3 个答案: