Хороший селектор для удаления этого ужасного кода

Question

может ли кто-нибудь предложить селектор, чтобы покончить с этим ужасным куском кода:

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

HTML выглядит так:

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

Учитывая, что пользователь нажал на изображение, мне нужно получить следующее (и только следующее) .descriptionContent элемент.

Спасибо,
К

Answer 1

Поскольку вы беспокоитесь о том, чтобы обернуть изображение во что-нибудь, попробуйте следующее:

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

Ближайшая команда находит ближайшего предка, соответствующего данному селектору. Глянь сюда.

Answer 2

Я думаю, вы еще много услышите о том, как это структурировано в целом.Если вы удалите таблицу, большая часть этой проблемы исчезнет.

Что-то вроде:

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

Тогда вы можете просто сделать...

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

Когда пользователь нажимает...