Un joli sélecteur pour enlever ce code terrible

Question

quelqu'un peut-il offrir un sélecteur pour en finir avec cette horrible morceau de code:

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

Le HTML ressemble à ceci:

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

Étant donné un utilisateur cliqué sur le img, j'ai besoin d'obtenir le prochain (et seulement le prochain) .descriptionContent élément.

Merci,
K

Answer 1

Puisque vous êtes inquiet pour envelopper l'image dans quelque chose, essayez ceci:

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

La commande la plus proche trouve ancêtre le plus proche correspondant au sélecteur donné. See here.

Answer 2

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

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 tout simplement faire ...

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

Lorsque l'utilisateur clique ...