CSS-селекторы в js-core

Octane, 12.01.2009

Логотип 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'), в качестве контекста поиска, автоматически передается текущий элемент.

Скачать: пример, js-core.

В рамках акции «Обмен постовыми»:

Подписаться на обновления блога

Вам понравился наш блог, хотите следить за обновлениями? Подпишитесь на RSS рассылку или рассылку по электронной почте. Так же вы можете следить за нами в Twitter.

Категории: CSS, JavaScript, js-core | Комментировать

Комментарии

  1. Сергей / 10.06.2009 в 05:40

    $(‘list’).query(‘li:nth-child(odd)’).each(‘addClass’, ‘odd’); вот тут должно быть
    $(‘#list’).query(‘li:nth-child(odd)’).each(‘addClass’, ‘odd’); (решетка, т.к. выбираем по ID)

  2. Octane / 10.06.2009 в 10:23

    Сергей, это же не jQuery и функция $ используется только для поиска элементов по идентификатору, поэтому решетка там не нужна.

  3. Сергей / 10.06.2009 в 11:11

    Octane, ну да сразу не сообразил… Псевдоним getElementById().
    Что поделать — привычка))

  4. v01d.cmd / 25.05.2011 в 19:53

    С выходом CSS3 всё стало проще =) добавляем стиль и всё! где #list — id

    #list li:nth-child(odd) {
    background: #ffc;
    }
    #list li:nth-child(even) {
    background: #abc;
    }

Оставить комментарий

480×60
480×60