jquery seleccionar todos los hijos después de nth-child

Question

Estoy trabajando con jquery y creando listas de show hide, necesito ocultar todos los elementos de la lista infantil que siguen al sexto hijo en el ul. Normalmente lo haría estableciendo la altura y luego cambiando la altura con un clic, pero para que esto funcione, necesito agregar overflow:hidden a mi CSS, y esta no es una opción.

¿Cómo obtendría todos los elementos de la lista infantil que son mayores que el séptimo hijo?

Algo así como,

$("ul li:6n").domeSomething()

Answer 1

¿Cómo voy a conseguir todos los elementos de la lista niños que son mayores que el séptimo hijo?

Seleccione el índice de elementos = 7+

$("ul li:gt(6)").domeSomething() 

:gt selector

El selector utiliza el índice de base cero :

tome en cuenta que 0-desde las matrices de JavaScript utilizan indexación, estos selectores reflejan ese hecho. Esta es la razón por la cual $ ('. Myclass: gt (1)') selecciona elementos después del segundo elemento en el documento con la clase myclass, en lugar de después de la primera. Por el contrario,: ​​nth-child (n) usa indexación basada en 1 para cumplir con la especificación CSS.

Answer 2

Prueba esto:

$('ul li:eq(6)').nextAll().domeSomething() 

Answer 3

uso rebanada para reducir un conjunto

.slice(start[,end]) 

http://api.jquery.com/slice/

ejemplo (editado)

$("ul li").slice(6).doSomething(...) 

Answer 4

Quería escribir mi respuesta solo para analizar dos respuestas anteriores: the answer de gdoron y the answer de neu-rah. Si pudiéramos ver en el recuento de votos uno puede ver que la mayoría de los lectores encuentran mejor la respuesta de Doron. No estoy de acuerdo y trato de explicar por qué.

La explicación se encontraría la documentación de :gt() Selector (ver "Notas adicionales:" here):

Debido :gt() es una extensión de jQuery y no forma parte de la especificación CSS , consultas utilizando :gt() no puede tomar ventaja del aumento de rendimiento proporcionado por el método nativo DOM querySelectorAll() . Para un mejor rendimiento en navegadores modernos, use $("your-pure-css-selector").slice(index) en su lugar.

puede probar el código con here o mejor here (con código no minimizada de jQuery 1.7.2). El código usa solo la declaración $("ul li:gt(6)").css("color", "red");. Comprenderá mejor el problema si inicia la demostración en Developer Tools of Chrome con el botón activado "Pausa en excepciones". Verá la siguiente excepción (que no será la primera):

Así se puede ver que la aplicación actual de jQuery intente utilizar nativaquerySelectorAll() del navegador web para obtener la mejor actuación. Después de eso, la función $.makeArray se usará para crear el envoltorio jQuery del NodeList. En caso de excepción the line

return oldSizzle(query, context, extra, seed); 

por lo que tendrá el mejor rendimiento si desea utilizar selectores apoyados por querySelectorAll(). Por ejemplo

$("ul li").slice(7) 

es mejor que

$("ul li:gt(6)") 

Yo te recomiendo utilizar selectores más exactas siempre que sea posible. Por ejemplo, si el elemento padre tiene <ul>id="menu1" continuación, puede utilizar

$("#menu1 >li").slice(7) 

para los mejores resultados. Ayudará adicionalmente en el caso de los elementos múltiples<ul> en su página.

Alguien puede mencionar: el selector "ul li:gt(6)" funciona con la suficiente rapidez. Es correcto, pero no debe olvidar que utiliza selectores de algún tiempo dentro del bucle o lo usa dentro de funciones que se denominarán dentro de bucles. Entonces, la diferencia entre 10ms y 30ms puede ser mucho más clara si el tiempo de ejecución se multiplicará a 100.

Además, alguien se hace la pregunta de cómo implementar una selección y obtener la respuesta, él/ella usará el código patrón permanentemente. Creo que sería mejor usar el patrón que tiene una ventaja de rendimiento. No es así.

ACTUALIZADO: Para borrar la diferencia en el rendimiento de $("ul li:gt(6)"), $("ul li").slice(7) y $("#menu1 >li").slice(7) selectores que hice, además, the demo. Todos pueden probar la diferencia en el navegador web que usa. Además, no debe olvidar que, en el caso de que la página tenga muchos otros elementos, el selector de identificación funcionará mejor.

En mi ordenador el tiempo de ejecución de $("ul li").slice(7) y $("#menu1 >li").slice(7) son aproximadamente los mismos (la página tienen muy poco elementos) y es aproximadamente 2,5-4,5 vez mejor como el de $("ul li:gt(6)"). Los resultados pueden depender del número de elementos li, el número de elementos en la página y muchas otras cosas, pero espero que la prueba no muestre que el uso de slice tiene una ventaja de rendimiento en comparación con el uso de :gt (exactamente como puede leer en la documentación jqGrid referenciada anteriormente).