Cómo obtener el elemento principal en jQuery

Html

Soy abuelo del elemento span

• Soy padre directo del elemento de span
  Yo soy el elemento de span
  

Hay un total de cuatro elementos generados en el código anterior, que son; ,

,
• , y . Observando su jerarquía en el anterior el
• El elemento se considera un padre directo del elemento,
  es el abuelo del elemento, y es el bisabuelo porque todos los elementos están anidados dentro del elemento.

  jQuery

  $ (documento).Ready (function ()
  $ ("Span").padre().CSS ("color": "púrpura", "borde": "2px sólido púrpura");
  );

  Hemos aplicado el método parent () en el elemento y también encadenamos el método css () para resaltar el padre directo del elemento y verificar que se acceda con éxito al elemento principal.

  Algunos estilo básico también se aplican a estos elementos utilizando CSS para una mejor demostración y comprensión.

  Producción

  El método parent () funciona correctamente y se accede con éxito al elemento principal.

  Método de padres ()

  El método de padres () funciona de manera similar al método parent () con la única diferencia que, en lugar de obtener el padre directo, obtiene a todos los padres del elemento especificado.

  Sintaxis

  $ (selector).Padres (filtro)

  Nota: El parámetro del filtro se utiliza para compactar la búsqueda del elemento principal especificando una expresión de selección y es opcional.

  Ejemplo

  Para comprender el concepto del método de padres (), consultaremos el mismo ejemplo que el anterior y usaremos el método de padres () en lugar del método parent () y verá cómo funciona.

  jQuery

  $ (documento).Ready (function ()
  $ ("Span").padres().CSS ("color": "púrpura", "borde": "3px sólido púrpura");
  );

  El código anterior debe resaltar a todos los padres del elemento en el estilo especificado por el método CSS ().

  Producción

  El elemento resaltado sobre el cuerpo es el elemento. El método de padres () también lo obtiene, ya que también es un padre del elemento especificado.

  Método de PadreSuntil ()

  Para obtener elementos principales entre dos elementos especificados, se utiliza el método ParentUntil ().

  Sintaxis

  $ (selector).Parentsuntil (pare, filtro)

  Nota: El parámetro del filtro tiene la misma función que la del método parent () y de los padres (), sin embargo, el parámetro de detención se usa para denotar el elemento en el que debe detenerse la búsqueda de elementos parentales. Ambos parámetros son opcionales.

  Ejemplo

  Este ejemplo ilustra el funcionamiento del método parentuntil ().

  Html

  cuerpo (bisabuelo)
  Div (abuelo)
  
  UL (padre directo)
  
  • li
    durar
    
  
  
  
  
  

  Hemos creado un div y dentro de ese div tenemos tres elementos anidados que son

  ,
  • , y .

    jQuery

    $ (documento).Ready (function ()
    $ ("Li").Padresuntil ("cuerpo").css ("color": "azul", "borde": "2px azul sólido");
    );

    En el código anterior, hemos seleccionado el

  • elemento y usado el método ParentUntil () para encontrar todos los padres entre el
  • , y elementos.

    Producción

    Como se puede ver en la producción, todos los padres de

  • (div y ul), antes han sido resaltados.

    método más cercano ()

    El método más cercano () obtiene el primer elemento que coincide con el elemento especificado.

    Sintaxis

    $ (selector).más cercano (filtro, contexto)

    Nota: El parámetro del filtro tiene la misma funcionalidad que en otros métodos, sin embargo, se requiere en este método. El parámetro de contexto, por otro lado, es opcional y especifica un elemento DOM dentro del cual se debe encontrar una coincidencia.

    Ejemplo

    Este ejemplo ilustra el funcionamiento del método CloseSt ().

    cuerpo (tatarabuelo)
    Div (gran/abuelo)
    
    UL (segundo antepasado/segundo abuelo)
    
    UL (primer antepasado/primer abuelo)
    
    • li (padre directo)
      durar
      
    
    
    
    
    
    
    

    Hemos creado un div y dentro de ese div hemos anidado dos

    elementos y uno
    • , elemento.

      jQuery

      $ (documento).Ready (function ()
      $ ("Span").más cercano ("UL").css ("color": "azul", "borde": "2px azul sólido");
      );

      Hemos aplicado el método más cercano () para resaltar el primer ancestro del elemento.

      Producción

      Como se señala en la salida, el segundo

      El elemento es el primer antepasado del elemento.

      Usando los métodos mencionados anteriormente, puede obtener elementos principales de un elemento HTML especificado.

      Conclusión

      Para obtener el elemento principal en jQuery aplicando métodos como, parent (), padres (), ParentUtil () y Closer (). El método parent () obtiene el padre directo de un elemento, el método de los padres () obtiene a todos los padres del elemento A, ParentUtil () encuentra elementos de los padres entre dos elementos especificados y el método cercano () obtiene el primer elemento que coincide con el especificado. elemento. Todos estos métodos, junto con sus ejemplos relevantes, se explican en esta guía.