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

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

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

<!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; }</pre>
  <p>This is paragraph #1.</p>
  <p>This is paragraph #2. (Should be matched.)</p>
  <p>This is paragraph #3.</p>
  <p>This is paragraph #4. (Should be matched.)</p>
  <div>This is not a paragraph, but a <code>div</code>.</div>
  <p>This is paragraph #5.</p>
  <p>This is paragraph #6. (Should be matched.)</p>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script>
   $(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');
   });
  </script>
 </body>
</html>

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

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

Ответы

Ответ 1

/**
 * 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];

Ответ 2

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

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

Ответ 3

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

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

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