O pai() O método em jQuery encontra o pai direto do seletor fornecido. É uma função embutida no jQuery. Este método percorre apenas um único nível acima na árvore DOM e retorna o pai direto do elemento selecionado.
O pai() método é semelhante ao pais() método, pois ambos viajam até a árvore DOM e retornam o elemento pai. Mas a diferença é que o pais() O método percorre vários níveis acima na árvore DOM e retorna todos os ancestrais, incluindo um avô, bisavô, etc. do seletor fornecido, enquanto o método pai() O método percorre um único nível acima e retorna apenas o pai direto do seletor fornecido.
Sintaxe
$(selector).parent(filter)
O seletor na sintaxe acima representa o elemento selecionado cujo pai deve ser pesquisado. O filtro na sintaxe acima está o parâmetro opcional que especifica a expressão do seletor, que é usada para restringir a pesquisa.
Exemplo 1
Neste exemplo, não estamos usando o parâmetro opcional do pai() método. Aqui, há um elemento div que contém um ul elemento, um título h2 e um elemento de parágrafo.
Estamos aplicando o pai() método para pesquisar o pai do título h2. Se usarmos o pais() método em vez de usar o pai() método, todos os ancestrais do título h2, incluindo o elemento body, serão destacados.
.main *{ font-size: 20px; border: 2px solid black; color: black; padding: 10px; margin: 17px; } function fun(){ $(document).ready(function(){ $('h2').parent().css({ 'font-size': '30px', 'color': 'blue', 'border': '6px dashed blue'}); }); } div <ul> ul <h2> Heading h2 <p> Paragraph element </p> </h2> </ul> click me Teste agora Saída:
Após a execução do código acima, a saída será -
Depois de clicar no botão fornecido, a saída será -
Exemplo2
Neste exemplo estamos usando o parâmetro opcional do pai() método para encontrar o pai do primeiro elemento do parágrafo. Aqui, há mais de um elemento de parágrafo, mas temos que encontrar o pai do primeiro elemento de parágrafo. Então, estamos passando o pseudo-seletor ( :primeiro ) como o valor opcional do pai() método.
.main *{ font-size: 20px; border: 2px solid black; color: black; padding: 5px; margin: 10px; } function fun() { $(document).ready(function(){ $('p').parent(':first').css({'color': 'blue', 'border': '3px dashed blue'}); }); } body div1 div2 <h2> h2 <p> Paragraph element </p> </h2> <h2> h2 <p> Paragraph element </p> </h2> click me Após a execução do código acima, a saída será -
Depois de clicar no botão fornecido, a saída será -
Exemplo3
Neste exemplo estamos usando o parâmetro opcional do pai() método para encontrar o pai específico do seletor fornecido. Aqui, existem três elementos de parágrafo com pais diferentes. Estamos encontrando o h2 pai do elemento de parágrafo. Então, para conseguir o mesmo, temos que passar pelo h2 como o valor opcional do pai() método.
.main *{ font-size: 20px; border: 2px solid black; color: black; padding: 5px; margin: 10px; } function fun() { $(document).ready(function(){ $('p').parent('h2').css({'color': 'blue', 'border': '5px dashed blue'}); }); } body div1 div2 <p> Paragraph element </p> <h2> h2 <p> Paragraph element </p> </h2> <ul> ul <p> Paragraph element </p> </ul> click me Teste agora Saída:
Após a execução do código acima, a saída será -
Depois de clicar no botão fornecido, a saída será -
