이 끔찍한 코드를 제거하는 좋은 선택기

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>

사용자가 IMG를 클릭했을 때 다음을 가져와야합니다 (그리고 다음에만) .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();

사용자가 클릭하면 ...