Uso dos métodos .parent(), .parents() ou .closest()

Bem pessoal, nunca é demais falar de coisas simples, mas que ajudam muito a manutenção do código desenvolvido. Algumas vezes que acessei o código escrito por terceiros, me deparei com algumas coisas que são bastante utilizadas, porém não é nem de longe a melhor forma de trabalhar. Irei citar alguns exemplos agora:

<ul id="one" class="level-1">
  <li class="item-i">I</li>
  <li id="ii" class="item-ii">II
  <ul class="level-2">
    <li class="item-a">A</li>
    <li class="item-b">B
      <ul class="level-3">
        <li class="item-1">1</li>
        <li class="item-2">2</li>
        <li class="item-3">3</li>
      </ul>
    </li>
    <li class="item-c">C</li>
  </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

Se você estiver com o objeto $('li.item-1') e quiser ir para a primeira ul da árvore, neste caso $('ul#one'), quais as formas que podemos chegar até ela se esse conteúdo não é estático e este id é flexível?

Primeira opção – uso do parent()

Essa é a opção que utiliza o método parent() infinitamente. Por incrível que pareça, é a que eu mais vejo.

var item1 = $('li.item-1'),
    primeira_ul = item1.parent().parent().parent().parent();

O maior problema desta opção, além do código repetido que está meio óbvio, é que se o código html for modificado acrescentando ou removendo algum elemento, este javascript precisará ser alterado também.

Segunda opção – uso do parents()

Essa é a opção que utiliza o método parents(). É uma solução válida, porém o código não fica muito elegante.

var item1 = $('li.item-1'),
    primeira_ul = item1.parents('ul.level-1:eq(0)');

Por que utilizar o eq(0)?

Desta forma ele irá retornar o objeto da primeiro ul pai com a classe .level-1 que ele encontrar.

Terceira – uso do closest()

Essa é a opção que utiliza o método closest(). Na minha opinião é a opção mais elegante.

var item1 = $('li.item-1'),
    primeira_ul = item1.closest('ul.level-1');

Esta forma é idêntica a segunda opção, porém acho que o código fica mais elegante.

E o que isso tem haver com flexibilidade no código?

Imagine que você precisa incluir outros elementos dentro desses nós, como um link ou um span. Da primeira forma você precisará dar manutenção no JS, acrescentando ou retirando a quantidade de métodos parent() que existir. Utilizando o parents() ou o closest(), não precisa se preocupar com isso. Ele se preocupa por você!

---