: nth-of-type () в jQuery / 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; }
<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>
This is not a paragraph, but a <code>div</code>.
<p>This is paragraph #5.</p>
<p>This is paragraph #6. (Should be matched.)</p>
$(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 селекторов), что-то вроде$('body p:nth-child');
будет конечно работать. Это выигралоТем не менее, он не работает в старых браузерах, потому что у Sizzle нет альтернативного метода для этого селектора.
Можно ли легко добавить:nth-of-type()
селектор Sizzle, или реализовать его в JQuery (с помощьювстроенный:nth-child()
селекторвозможно)?пользовательский селектор с параметрами было бы здорово.