Un joli sélecteur pour supprimer ce code horrible

Question

n'importe qui peut-il offrir un sélecteur pour se débarrasser de cet horrible morceau de code:

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

Le code HTML ressemble à ceci:

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

Etant donné qu'un utilisateur a cliqué sur l'img, je dois obtenir l'élément suivant (et uniquement le suivant) .descriptionContent .

Merci,
K

Answer 1

Puisque vous craignez de ne pas envelopper l'image, essayez ceci:

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

La commande la plus proche trouve l'ancêtre le plus proche correspondant au sélecteur donné. Voir ici.

Answer 2

Je pense que vous allez beaucoup entendre parler de la façon dont cela est structuré en général. Si vous éliminez la table, une grande partie de ce problème disparaîtra.

Quelque chose comme:

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

Ensuite, vous pouvez simplement faire ...

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

Lorsque l'utilisateur clique sur ...