Question

In my code, I have this loop, which brings up various 2-hour time blocks. I am finding it very difficult to get the text out of .clientSearchSectionButtonHiddenTextEndTime. I am having no problems getting the text out of .clientSearchSectionButtonHiddenTextStartTime.

PHP

while($row = mysql_fetch_array($result)) {

            $startTimeVar = $row["startTime"];
            $startTimeCorrected = date("g:i a", strtotime($startTimeVar));
            $endTimeVar = $row["endTime"];
            $endTimeCorrected = date("g:i a", strtotime($endTimeVar));

                echo
                '<div class = "clientSearchSectionButtonText">
                    <div class = "clientSearchSectionButtonTextTime">
                        '.$startTimeCorrected.' - '.$endTimeCorrected.'
                    </div>
                </div>
                <span  class = "clientSearchSectionButtonHiddenTextStartTime" style = "display: none;">
                    '.$row["startTime"].'
                </span>
                <span  class = "clientSearchSectionButtonHiddenTextEndTime" style = "display: none;">
                    '.$row["endTime"].'
                </span>
            <div class = "buttonBreak">
            </div>';
        }

JQuery – I have tried to select it in many ways. $this gives the div clientSearchSectionButtonTextTime. I have tried lots of different things including .parent().next, parent().sibling, .sibling…etc

/*----SELECT TIME----*/ 
$(".clientSearchSectionButtonTextTime").live("click", function() {
    startTime = $(this).parent().next(".clientSearchSectionButtonHiddenTextStartTime").text();
    endTime = $(this).parent().next(".clientSearchSectionButtonHiddenTextEndTime").text();
    alert (endTime);
});

Answer 1

Sure enough, .next() only selects the immediately next sibling. If a selector is given, that single sibling is tested to match it, otherwise result is empty.

Try .nextAll('.uncannyClassName') and you should be good to go.

/*----SELECT TIME----*/ 
$(".clientSearchSectionButtonTextTime").live("click", function() {
    startTime = $(this).parent().nextAll(".clientSearchSectionButtonHiddenTextStartTime").text();
    endTime = $(this).parent().nextAll(".clientSearchSectionButtonHiddenTextEndTime").text();
    alert (endTime);
});

I’d also add it to the .clientSearchSectionButtonHiddenTextStartTime too, to allow future scalability to the DOM (and not just by selecting the next whichever element).