: nth-of-type () в jQuery / Sizzle?
Меня удивило то, что Sizzle (использует механизм выбора jQuery) имеет встроенный селектор :nth-child() , но не имеет селектора :nth-of-type() .
Чтобы проиллюстрировать разницу между :nth-child() и :nth-of-type() и проиллюстрировать проблему, рассмотрите следующий HTML-документ :
:nth-of-type() in Sizzle/jQuery? body p:nth-of-type(2n) { background: red; }The following CSS is applied to this document:
- jQuery scrollTop не работает в Chrome, но работает в Firefox
- Как я могу получить идентификатор элемента с помощью jQuery?
- Как получить выражение селектора jQuery в виде текста?
- jQuery: содержит селектор для поиска нескольких строк
- Элемент или class LIKE для jQuery?
body p:nth-of-type(2n) { background: red; }This is paragraph #1.
This is paragraph #2. (Should be matched.)
This is paragraph #3.
This is paragraph #4. (Should be matched.)
This is not a paragraph, but adiv.This is paragraph #5.
This is paragraph #6. (Should be matched.)
$(function() { // The following should give every second paragraph (those that had red backgrounds already after the CSS was applied) an orange background. // $('body p:nth-of-type(2n)').css('background', 'orange'); });
Поскольку Sizzle использует встроенные в браузер методы
querySelector()иquerySelectorAll()если они присутствуют (т. Е. В браузерах, которые уже реализуют API Selectors ), такие вещи, как$('body p:nth-child');конечно, будет работать. Однако он не будет работать в старых браузерах, потому что Sizzle не имеет метода возврата для этого селектора.Можно ли легко добавить селектор
:nth-of-type()в Sizzle или реализовать его в jQuery (возможно, с помощью встроенного селектора:nth-child())? Пользовательский селектор с параметрами будет приятным.
- Почему мой jQuery: not () не работает в CSS?
- Выбор элементов с определенным цветом фона
- Фильтр jquery имеет +
- Как я могу определить, возвращает ли селектор null?
- Подстановочные знаки в селекторах jQuery
- jQuery: выбрать class элемента и идентификатор одновременно?
- Тестирование, если флажок установлен с помощью jQuery
- Включение / выключение флажков
/** * Return true to include current element * Return false to exclude current element */ $.expr[':']['nth-of-type'] = function(elem, i, match) { if (match[3].indexOf("n") === -1) return i + 1 == match[3]; var parts = match[3].split("+"); return (i + 1 - (parts[1] || 0)) % parseInt(parts[0], 10) === 0; };Тестовый пример – ( проверьте IE или переименуйте селектор )
Вы можете, конечно, добавить еще и странно :
match[3] = match[3] == "even" ? "2n" : match[3] == "odd" ? "2n+1" : match[3];плагин jQuery moreSelectors поддерживает nth-of-type (и многие другие селектора). Я предлагаю либо использовать это, либо просто реализовать простой плагин, который реализует только точные селектор, который вам нужен. Вы должны иметь возможность копировать-вставить код оттуда.
Счастливый взлом!
Я не могу притворяться, что знаю, как реализуется nth-of-type, но jQuery действительно обеспечивает механизм, с помощью которого вы можете создать свой собственный пользовательский селектор.
Следующий вопрос касается пользовательских селекторов и может дать вам полезную информацию
Какие полезные пользовательские селектора jQuery вы написали?
Найти все элементы на основе ids с помощью regex в селекторе jQuery Каков самый быстрый способ выбора элементов-потомков в jQuery? jQuery выбрать все, кроме первого полный календарный выбор ячейки на мобильном устройстве? Получить список отмеченных флажков в div с помощью jQuery jQuery .bind () vs. .on () Как выбрать элементы, которые не имеют определенного дочернего элемента с JQuery Случай селектора CSS для атрибутов jQuery ИЛИ Селектор? jQuery как найти элемент на основе значения атрибута данных? jQuery выбрать по classу VS выбрать по атрибуту