3.4 Selecionando elementos pela hierarquia

<div id="site">

<button>voltar</button>

<form>

<span>Salvar login? </span>

<input type="checkbox">

<a href="#">Avaliar custo</a>

<label for="nome">Nome:</label>

<input type="text" id="nome"/>

<label for="cpf">CPF:</label>

<input type="text" id="cpf"/>

<button>Cadastrar</button>

<input type="text" id="email"/>

<ul>

<li><a href="#">solicitar ajuda</a></li>

<li><a href="#">verificar compra</a></li>

<li><a href="#">confirmar reserva</a></li>

</ul>

</form>

</div>

16 Seleciona por ancestral direto ou indireto

No exemplo, a seguir desejamos selecionar todos os links que estão contidos dentro do formulário, sejam filhos diretos ou indiretos:

$("form a")

O retorno do seletor são 4 links:

<a href="#">Avaliar custo</a>

<a href="#">solicitar ajuda</a>

<a href="#">verificar compra</a>

<a href="#">confirmar reserva</a>

17 Seleciona por ancestral direto

No exemplo, queremos selecionar apenas os links que são filhos diretos do form:

$("form > a")

Existe apenas um link associado diretamente ao form. Os outros 3 links são filhos do elemento <li>.

<a href="#">Avaliar custo</a>

18 Seleciona elemento adjacente

No exemplo, gostaríamos de selecionar todas as input que são adjacentes (que estão ao lado) de um elemento do tipo label:

$("label + input")

O resultado será as seguintes inputs:

<input type="text" id="nome"/>

<input type="text" id="cpf"/>

19 Seleciona elemento irmão