JQuery: поиск / фильтрация атрибутов в контексте - PullRequest
Новая
       15

JQuery: поиск / фильтрация атрибутов в контексте

4 голосов
/ 12 октября 2010

Я пробовал несколько разных способов фильтрации поиска определенных узлов в моем 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 []

Что я здесь не так делаю? Сначала я подумал, что это может быть пространство имен пользовательского интерфейса, но добавление его в html документ или тело, похоже, не имеет никакого значения Помощь очень ценится

ПОЛНЫЙ ИСТОЧНИК НИЖЕ: 

<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>

Ответы [ 3 ]

2 голосов
/ 12 октября 2010

Полагаю, это потому, что когда вы делаете: 

$('[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>
1 голос
/ 12 октября 2010

Лучший способ сделать это с помощью 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, и, возможно, стоит сообщить об этом как таковой.

0 голосов
/ 12 октября 2010

Попробуйте <div id="component"></div> вместо ..

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...