Exemplo
Retornar 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
Tente você mesmo " Definição e Uso
O parents() método retorna todos os elementos ancestrais do elemento selecionado.
Um antepassado é um pai, avô, bisavô, e assim por diante.
A árvore DOM: Este método percorrer para cima do elemento pai junto ancestrais de elementos DOM, todo o caminho até o elemento raiz do documento (<html>) .
Nota: Se o parâmetro de filtro estiver vazia, esta função irá selecionar todos os antepassados de um conjunto de elementos, a partir da controladora direta e todo o caminho até <body> e <html> . Por isso, é muitas vezes útil para passar uma expressão selector para limitar o resultado da pesquisa.
Este método é semelhante ao closest() , em que ambos atravessam a árvore DOM. As diferenças são as seguintes:
parents()
- Começa com o elemento pai
- Viaja até a árvore DOM e retorna todos os antepassados que corresponde à expressão passada
- O objeto jQuery retornado contém zero ou mais do que um elemento
closest()
- Começa com o elemento atual
- Viaja até a árvore DOM e retorna o primeiro ancestral que coincide com a 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 dados
Sintaxe
$(selector).parents( filter )| Parâmetro | Descrição |
|---|---|
| class =filtro"notranslate" | Opcional. Especifica uma expressão selector para refinar a busca por ancestrais Nota: Para retornar vários antepassados, separe cada expressão com uma vírgula. |
Tente você mesmo - Exemplos
Reduzir a procura
Como usar o parâmetro de filtro para retornar todos os antepassados de <span> que são <ul> elementos.
Retornar vários antepassados
Como usar o parâmetro de filtro para retornar todos os antepassados de <span> que são <li> e <div> elementos.
Mostrar os ancestrais de um elemento por nomes de marcas
Uma demonstração que mostra que os ancestrais de uma <span> elemento realmente são.