CSS-селекторы в js-core
Встроенной поддержки механизма выборки элементов с использованием CSS-селекторов нет, но легко внедрить один из существующих.
Возьмем готовые решения Sizzle, Peppy и Yass, и сделаем расширение для js-core, которое будет автоматически преобразовывать список элементов, выдаваемый этими движками, в объект для работы со списками узлов, предусмотренный в framework’е.
Sizzle
core.query = function(selector, context) {
return new core.list(Sizzle(selector, context), false);
};
core.prototype.query = function(selector) {
return new core.list(Sizzle(selector, this.node), false);
};Peppy
core.query = function(selector, context) {
return new core.list(peppy.query(selector, context), false);
};
core.prototype.query = function(selector) {
return new core.list(peppy.query(selector, this.node), false);
};Yass
core.query = function(selector, context) {
return new core.list(yass(selector, context), false);
};
core.prototype.query = function(selector) {
return new core.list(yass(selector, this.node), false);
};Добавьте одно из этих расширений сразу после загрузки js-core и соответствующего движка выборки элементов по CSS-селекторам.
Рассмотрим, как это можно использовать. Возьмем следующий XHTML-код:
<ul id="list">
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
<li>Fourth list item</li>
<li>Fifth list item</li>
<li>Sixth list item</li>
<li>Seventh list item</li>
<li>Eighth list item</li>
</ul>Опишем CSS-класс:
.odd {
background: #ffc;
}Теперь, с помощью JavaScript, добавим класс odd всем нечетным элементам списка list:
$.query('#list > li:nth-child(odd)').each('addClass', 'odd');
// или
$('list').query('li:nth-child(odd)').each('addClass', 'odd');Получим так называемую «зебру» из элементов списка:
<ul id="list">
<li class="odd">First list item</li>
<li>Second list item</li>
<li class="odd">Third list item</li>
<li>Fourth list item</li>
<li class="odd">Fifth list item</li>
<li>Sixth list item</li>
<li class="odd">Seventh list item</li>
<li>Eighth list item</li>
</ul>В функции $.query(…) вторым параметром можно указать контекст поиска. Это бывает удобно, например, при поиске элементов ввода внутри форм или нахождении элементов в XML-данных, пришедших с сервера через AJAX.
// найти все чекбоксы в первой форме документа
$.query('input[type="checkbox"]', document.forms[0]);В методе $('id'|node).query('selector'), в качестве контекста поиска, автоматически передается текущий элемент.
В рамках акции «Обмен постовыми»:
- Записки микростокового иллюстратора — блог о том, как еще можно заработать в сети.
Похожие темы
RSS-лента комментариев к этой статье | Обратная ссылка (trackback link)
$(‘list’).query(‘li:nth-child(odd)’).each(‘addClass’, ‘odd’); вот тут должно быть
$(‘#list’).query(‘li:nth-child(odd)’).each(‘addClass’, ‘odd’); (решетка, т.к. выбираем по ID)
Сергей, это же не jQuery и функция $ используется только для поиска элементов по идентификатору, поэтому решетка там не нужна.
Octane, ну да сразу не сообразил… Псевдоним getElementById().
Что поделать — привычка))
С выходом CSS3 всё стало проще =) добавляем стиль и всё! где #list — id
#list li:nth-child(odd) {
background: #ffc;
}
#list li:nth-child(even) {
background: #abc;
}