jQuery selector - what am I doing wrong?

Question

Given the following Html:

<td>
    <div class="preWorkHoursCell">&nbsp;</div>
    <div class="timelineCell" data-resourceid="@(resource.Id)" data-date="@(currentDate.ToString("yyyyMMdd"))">&nbsp;</div>
    <div class="postWorkHoursCell">&nbsp;</div>
</td>

and the following jQuery:

function createEvent(resourceId, startDate) {
    var timelineCell = $(".timelineCell[data-resourceid=" + resourceId + "][data-date=" + startDate + "]");
    console.log(timelineCell.length);  // <-- This is 1

    var preWorkHoursCell = $(timelineCell).closest(".preWorkHoursCell");
    console.log(preWorkHoursCell.length);    // <-- This is 0
}

How do I get a reference to the preWorkHoursCell div given the timelineCell?

Answer 1

You can use .prev(),

Use

var preWorkHoursCell = $(timelineCell).prev(".preWorkHoursCell");

OR

var preWorkHoursCell = $(timelineCell).closest('td').find(".preWorkHoursCell");