: nth-of-type () в jQuery / Sizzle? - PullRequest
Новая
       27

: nth-of-type () в jQuery / Sizzle?

16 голосов
/ 19 января 2010

Меня удивило, что Sizzle (движок селектора, который использует jQuery) поставляется со встроенным селектором :nth-child(), но не имеет селектора :nth-of-type().

Чтобы проиллюстрировать разницу между :nth-child() и :nth-of-type() и проиллюстрировать проблему, рассмотрим следующий HTML-документ : 

<code><!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title>:nth-of-type() in Sizzle/jQuery?</title>
  <style>
   body p:nth-of-type(2n) { background: red; }
  </style>
 </head>
 <body>
  <p>The following CSS is applied to this document:</p>
  <pre>body p:nth-of-type(2n) { background: red; }

Это абзац №1.

Это пункт № 2. (Должно совпадать.)

Это абзац № 3.

Это пункт № 4. (Должно совпадать.)

Это не абзац, а div.

Это абзац № 5.

Это пункт № 6. (Должно совпадать.)

$ (function () { // Следующее должно дать каждому второму абзацу (те, которые имели красный фон уже после применения CSS) оранжевый фон. // $ ('body p: nth-of-type (2n)'). css ('background', 'orange'); });

Поскольку Sizzle использует встроенные в браузер методы querySelector() и querySelectorAll(), если они есть (т.е. в браузерах, которые уже реализуют API селекторов ), такие вещи, как $('body p:nth-child');, конечно, будут работать. Он не будет работать в старых браузерах, потому что у Sizzle нет альтернативного метода для этого селектора.

Можно ли легко добавить селектор :nth-of-type() в Sizzle или внедрить его в jQuery (возможно, с помощью встроенного селектора :nth-child() )? пользовательский селектор с параметрами был бы хорош.

Ответы [ 3 ]

14 голосов
/ 21 января 2011 
/**
 * 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];

1017 *

4 голосов
/ 22 января 2010

плагин jQuery moreSelectors имеет поддержку nth-of-type (и многих других селекторов). Я предлагаю либо использовать это, либо просто реализовать простой плагин, который реализует только те селекторы, которые вам нужны. Вы должны быть в состоянии скопировать и вставить код оттуда.

Счастливого взлома!

1 голос
/ 19 января 2010

Я не могу притворяться, что знаю, как реализован nth-of-type, но jQuery предоставляет механизм, с помощью которого вы можете создать свой собственный селектор.

Следующий вопрос касается пользовательских селекторов и может дать вам полезную информацию

Какие полезные пользовательские селекторы jQuery вы написали?

...