name - : nth-of-type() en jQuery/Sizzle?
jquery selector id (3)
Me sorprendió que Sizzle (el motor selector que usa jQuery) viene con un selector integrado :nth-child() , pero carece de un selector :nth-of-type() .
Para ilustrar la diferencia entre :nth-child() y :nth-of-type() y para ilustrar el problema, considere el siguiente documento 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>
Dado que Sizzle usa los querySelector() y querySelectorAll() nativos del navegador si están presentes (es decir, en los navegadores que ya implementan la API de selectores ), cosas como $(''body p:nth-child''); Por supuesto funcionará. Sin embargo, no funcionará en navegadores más antiguos, ya que Sizzle no tiene un método alternativo para este selector.
¿Es posible agregar fácilmente el selector :nth-of-type() a Sizzle, o implementarlo en jQuery (usando el selector integrado :nth-child() , tal vez)? Un selector personalizado con parámetros sería bueno.
El complemento jQuery moreSelectors tiene soporte para nth-of-type (y muchos otros selectores). Sugiero usar eso, o simplemente implementar un complemento simple que solo implemente los selectores exactos que necesita. Deberías poder copiar y pegar el código desde allí.
¡Feliz piratería!
No puedo pretender saber cómo se implementa nth-of-type, pero jQuery proporciona un mecanismo mediante el cual puede crear su propio selector personalizado.
La siguiente pregunta trata sobre los selectores personalizados y puede proporcionarle una visión útil
/**
* 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;
};
Caso de prueba - ( marque en IE o cambie el nombre del selector )
Por supuesto, también puede agregar pares e impares :
match[3] = match[3] == "even" ? "2n" : match[3] == "odd" ? "2n+1" : match[3];
Al aire libre