Um seletor agradável para remover este código horrível

Question

Alguém pode oferecer um seletor para acabar com este pedaço horrível de código:

// img is the image element...
var descriptionContent = $(".descriptionContent", img.parent("td").parent("tr").next("tr"));

Os olhares html como este:

<table>
    <tr>
        <td><img /></td>
    </tr>
    <tr>
        <td><div class="descriptionContent" /></td>
    </tr>
    <!-- Repeat n times -->
</table>

Dado um usuário clicou na img, eu preciso para obter o próximo (e somente a próxima) elemento .descriptionContent.

Obrigado,
K

Answer 1

Uma vez que você está preocupado com envolvendo a imagem em algo, Tente isto:

var descriptionContent = $(".descriptionContent", img.closest("tr").next("tr"));

O comando mais próximo encontra o ancestral mais próximo combinando o seletor dado. Veja aqui.

Answer 2

Eu acho que você vai ouvir muito sobre a forma como este é estruturado em geral. Se você eliminar a tabela, um monte de este problema desaparece.

Algo como:

<div class="imgAndContent">
  <img src="blah.jpg">
  <span class="someDescription">Description.</span> <!-- or div, you choose based on your need -->
</div>

Em seguida, você pode simplesmente fazer ...

var descriptionContent = $(this).next();

Quando o usuário clica ...