jQuery Parents() Método
❮ Métodos de travessia do jQuery
Exemplo
Retorne todos os elementos ancestrais de <span>:
$(document).ready(function(){
$("span").parents().css({"color": "red", "border": "2px solid red"});
});
Resultado:
body (great-great-grandparent)
div (great-grandparent)
ul (grandparent)
- li (direct parent)
span
Definição e uso
O método parent() retorna todos os elementos ancestrais do elemento selecionado.
Um ancestral é um pai, avô, bisavô e assim por diante.
A árvore DOM: Este método percorre para cima do elemento pai ao longo dos ancestrais dos elementos DOM, até o elemento raiz do documento (<html>).
Nota: Se o parâmetro filter estiver vazio, esta função selecionará todos os ancestrais de um conjunto de elementos, desde o pai direto até <body> e <html>. Portanto, muitas vezes é útil passar uma expressão seletora para restringir o resultado da pesquisa.
Esse método é semelhante ao mais próximo() , pois ambos percorrem a árvore DOM. As diferenças são as seguintes:
pais()
- Começa com o elemento pai
- Percorre a árvore DOM e retorna todos os ancestrais que correspondem à expressão passada
- O objeto jQuery retornado contém zero ou mais de um elemento
mais próximo()
- Começa com o elemento atual
- Percorre a árvore DOM e retorna o primeiro ancestral que corresponde à expressão passada
- O objeto jQuery retornado contém zero ou um elemento
Outros métodos relacionados:
- parent() - retorna o elemento pai direto do elemento selecionado
- ParentsUntil() - retorna todos os elementos ancestrais entre dois argumentos fornecidos
Sintaxe
$(selector).parents(filter)
| Parameter | Description |
|---|---|
| filter | Optional. Specifies a selector expression to narrow down the search for ancestors Note: To return multiple ancestors, separate each expression with a comma. |
Experimente você mesmo - Exemplos
Como usar o parâmetro filter para retornar todos os ancestrais de <span> que são elementos <ul>.
Como usar o parâmetro filter para retornar todos os ancestrais de <span> que são elementos <li> e <div>.
Uma demonstração que mostra quem são os ancestrais de um elemento <span>.
❮ Métodos de travessia do jQuery