Un bel selettore per rimuovere questo codice orribile

Question

chiunque può offrire un selettore per eliminare questo orribile pezzo di codice:

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

L'html è simile al seguente:

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

Dato che un utente ha fatto clic su img, devo ottenere l'elemento .descriptionContent successivo (e solo successivo).

Grazie,
K

Answer 1

Dato che sei preoccupato di avvolgere l'immagine in qualcosa, prova questo:

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

Il comando più vicino trova l'antenato più vicino corrispondente al selettore indicato. Vedi qui.

Answer 2

Penso che sentirai molto sul modo in cui questo è strutturato in generale. Se elimini la tabella, gran parte di questo problema scompare.

Qualcosa del tipo:

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

Quindi puoi semplicemente fare ...

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

Quando l'utente fa clic su ...