Como obter elemento pai em jQuery

Html

Eu sou avô do elemento de span

• Sou pai direto do elemento de span
  Eu sou o elemento de extensão
  

Há um total de quatro elementos gerados no código acima, que são; ,

,
• , e . Observando sua hierarquia no acima
• O elemento é considerado um pai direto do elemento,
  é o avô do elemento e é o bisavô porque todos os elementos são aninhados dentro do elemento.

  jQuery

  $ (documento).pronto (function ()
  $ ("span").pai ().css ("color": "roxo", "borda": "2px Solid Purple");
  );

  Aplicamos o método parent () no elemento e também acorrentamos o método CSS () para destacar o pai direto do elemento e verificar se o elemento pai é acessado com sucesso.

  Algum estilo básico também é aplicado a esses elementos usando CSS para melhor demonstração e compreensão.

  Saída

  O método parent () está funcionando corretamente e o elemento pai é acessado com sucesso.

  Método dos pais ()

  O método dos pais () funciona de maneira semelhante ao método parent () com a única diferença que, em vez de buscar o pai direto, ele busca todos os pais do elemento especificado.

  Sintaxe

  $ (seletor).Pais (filtro)

  Observação: O parâmetro do filtro é usado para compactar a pesquisa do elemento pai, especificando uma expressão seletora e é opcional.

  Exemplo

  Para entender o conceito do método dos pais (), consultaremos o mesmo exemplo que acima e usaremos o método dos pais () em vez do método pai () e ver como ele funciona.

  jQuery

  $ (documento).pronto (function ()
  $ ("span").pais().css ("color": "roxo", "borda": "3px roxo sólido");
  );

  O código acima deve destacar todos os pais do elemento no estilo especificado pelo método css ().

  Saída

  O elemento destacado acima do corpo é o elemento. O método dos pais () também o busca, pois também é um pai do elemento especificado.

  Método dos pais ()

  Para buscar elementos parentais entre dois elementos especificados, o método parentuntil () é usado.

  Sintaxe

  $ (seletor).Paisuntil (pare, filtro)

  Observação: O parâmetro do filtro tem a mesma função que a do método Parent () e Pais (), no entanto, o parâmetro de parada é usado para denotar o elemento no qual a busca pelos elementos dos pais deve parar. Ambos os parâmetros são opcionais.

  Exemplo

  Este exemplo ilustra o funcionamento do método parentuntil ().

  Html

  corpo (bisavô)
  div (avô)
  
  UL (pai direto)
  
  • li
    período
    
  
  
  
  
  

  Criamos uma div e dentro daquele div, aninhamos três elementos que são

  ,
  • , e .

    jQuery

    $ (documento).pronto (function ()
    $ ("li").Paisuntil ("corpo").css ("color": "azul", "borda": "2px azul sólido");
    );

    No código acima, selecionamos o

  • elemento e usou o método parentuntil () para encontrar todos os pais entre o
  • , e elementos.

    Saída

    Como pode ser visto na produção, todos os pais de

  • (div e ul), antes foram destacados.

    Método mais próximo ()

    O método mais próximo () busca o primeiro elemento que corresponde ao elemento especificado.

    Sintaxe

    $ (seletor).mais próximo (filtro, contexto)

    Observação: O parâmetro do filtro tem a mesma funcionalidade que em outros métodos, no entanto, é necessário neste método. O parâmetro de contexto, por outro lado, é opcional e especifica um elemento DOM no qual uma correspondência deve ser encontrada.

    Exemplo

    Este exemplo ilustra o funcionamento do método mais próximo ().

    corpo (tataravô)
    div (grande/avô)
    
    Ul (segundo ancestral/segundo avô)
    
    Ul (primeiro ancestral/primeiro avô)
    
    • Li (pai direto)
      período
      
    
    
    
    
    
    
    

    Nós criamos uma div e dentro daquele div, aninhamos dois

    elementos, e um
    • , elemento.

      jQuery

      $ (documento).pronto (function ()
      $ ("span").mais próximo ("ul").css ("color": "azul", "borda": "2px azul sólido");
      );

      Aplicamos o método mais próximo () para destacar o primeiro ancestral do elemento.

      Saída

      Como é apontado na saída, o segundo

      elemento é o primeiro ancestral do elemento.

      Usando os métodos acima mencionados, você pode buscar elementos pais de um elemento HTML especificado.

      Conclusão

      Para buscar o elemento pai em jQuery aplicando métodos como, pai (), pais (), parentuntil () e mais próximo (). O método parent () busca o pai direto de um elemento, o método dos pais () busca todos os pais do elemento, Parentuntil () encontra elementos pais entre dois elementos especificados, e o método mais próximo () busca o primeiro elemento que corresponde ao especificado elemento. Todos esses métodos, juntamente com seus exemplos relevantes, são explicados neste guia.