Un buen selector para eliminar este horrible código.

Question

¿Alguien puede ofrecer un selector para acabar con este horrible fragmento de código:

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

El HTML se ve así:

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

Dado que un usuario ha hecho clic en el img, necesito obtener el siguiente (y solo el siguiente) .descriptionContent .

Gracias,
K

Answer 1

Ya que te preocupa envolver la imagen en algo, prueba esto:

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

El comando más cercano encuentra el antepasado más cercano que coincide con el selector dado. Consulte aquí.

Answer 2

Creo que vas a escuchar mucho sobre la forma en que está estructurado en general. Si elimina la tabla, gran parte 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>

Entonces puedes simplemente hacer ...

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

Cuando el usuario hace clic ...