Por ejemplo, hay 10 LIS en una UL, y hay un estilo especial en el tercer Li (como el color es rojo, y los otros son negros). Quiero establecer el color de todos los demás LIS, sin incluir LIS rojo, en rojo. En este momento, debes obtener todos los nodos hermanos de Red Lis.
Los hermanos son aquellos que son iguales que tú, ni el anterior ni el siguiente, y puede haber (hermano) mayor que tú o más joven que tú. Del mismo modo, se usan nodos hermanos. Aquí hay una forma regular de obtener nodos hermanos.
El código es el siguiente
función de los hermanos (elm) {var a = []; var p = elm.parentnode.children; para (var i = 0, pl = p.length; i <pl; i ++) {if (p [i]! == elm) a.push (p [i]);} return a;}Idea: primero obtenga a todos los hijos del nodo principal de este elemento. Debido a que todos los niños también incluyen este elemento en sí, debe eliminarse del resultado.
Hay otro método que parece extraño, que es obtener el código fuente de los nodos hermanos en jQuery:
El código es el siguiente
función siBling (elem) {var r = []; var n = elem.parentnode.firstchild; for (; n; n = n.nextsibling) {if (n.nodeType ==== 1 && n! == elem) {r.push (n);}} return r;}Idea: primero encuentre el primer nodo secundario del nodo principal de este elemento, y luego bucle para encontrar el próximo nodo hermano de este nodo hasta que se complete la búsqueda.
Me pregunto por qué jQuery usa este método. ¿Es este método más eficiente que el primer método?
Después de mi prueba preliminar: más de 1,500 LI, los dos métodos anteriores casi no tienen diferencia en la eficiencia, y ambos tienen éxito en unos pocos milisegundos. El entorno de prueba es Chrome y Firefox.
Si tiene la necesidad de obtener todos los nodos hermanos, puede usar cualquiera de los métodos anteriores.
Por supuesto, verificaré los dos métodos anteriores en el futuro. Si hay alguna diferencia, las actualizaré.
Método de búsqueda de nodos para padres, hijo y hermano de JQuery
jQuery.Parent (expr) Encuentre el nodo principal, puede pasar en Expr para el filtrado, como $ ("span"). Parent () o $ ("Span"). Parent (". Clase")
jQuery.Parents (expr), similar a jQuery.Parents (expr), pero busca todos los elementos de antepasados, no limitado a los elementos de los padres
jQuery.children (expr). Devuelve todos los nodos infantiles. Este método solo devolverá los nodos infantiles directos y no devolverá todos los nodos infantiles.
jQuery.contents (), devuelve todos los siguientes contenidos, incluidos nodos y texto. La diferencia entre este método y los niños () es que, incluido el texto en blanco, también se utilizará como un
JQuery Object Devuelve, Children () solo devolverá el nodo
jQuery.prev (), devuelve el nodo hermano anterior, no todos los nodos hermanos
jQuery.prevall (), devuelve todos los nodos de hermanos anteriores
jQuery.next (), devuelve el siguiente nodo hermano, no todos los nodos hermanos
jQuery.nextall (), devuelve todos los nodos hermanos posteriores
jQuery.siblings (), devuelve el nodo hermano, independientemente de la parte delantera y posterior
jQuery.Find (expr), es completamente diferente de jQuery.filter (expr). jQuery.filter () es filtrar una parte de la colección inicial de objetos jQuery, mientras que jQuery.find ()
El resultado de retorno no tendrá contenido en la colección inicial, como $ ("P"), Find ("Span"), comenzar a buscar <span> desde el elemento <p>, que es equivalente a $ ("P -Span")
El artículo anterior JS para obtener todos los nodos hermanos de los elementos es todo el contenido que comparto con ustedes. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.