Question

I apologize for the messy script and tags, I am just a beginner. I want to select the text in the div with the class “reserveAPickupAppointmentLocation. This div is inside $(this). $(this) is the selected entry out of many. The line that is relevant is:

var location = $(".reserveAPickupAppointmentLocation, this").text();

This returns the location from all entries, instead of just from $(this). How do I get only what I want?

Full jquery function:

   $(".reserveAPickupAppointmentRoommateAppointment").click (function() {
    if ($(this).hasClass("confirm")) {
    }
    else {
        $("img").remove(".confirmAppointment");
        $(".reserveAPickupAppointmentRoommateAppointment").removeClass("confirm");
        $(this).addClass("confirm");
        $(this).append("<img src=images/confirmAppointment.png class=confirmAppointment id=roommateAppointment>");
            $(".confirmAppointment").click (function() {
                $(".confirmAppointment").unbind("click");
                var location = $(".reserveAPickupAppointmentLocation, this").text();
                alert (location);
            });
    }
   });

relevant php part

echo '<table>';
while ($row = mysql_fetch_array($result)) { 

echo
'<tbody class = "reserveAPickupAppointmentRoommateAppointment">
    <tr>
            <td>'
                .$row["name"].
            '</td>
            <td>
                <span class = "reserveAPickupAppointmentLocation">'
                    .$row["location"].
                '</span>
            </td>
            <td>
                <span class = "reserveAPickupAppointmentSubLocation">'
                    .$row["subLocation"].
                '</span>
            </td>
        </tr>
        <tr>
            <td>
                <span class = "reserveAPickupAppointmentStartTime">'
                .$row["startTime"].
            '</span>    - 
            <span class = "reserveAPickupAppointmentEndTime">'
            .$row["endTime"].
                '</span>
            </td>
            <td>
                <span class = "reserveAPickupAppointmentDate">'
                .$row["date"].
                '</span>
            </td>
        </tr>
    </tbody>';
}

echo '</table>

Answer 1

To pass a second parameter to a jQuery selector as the context in which to search, you’ll need to close your quotes first.

var location = $(".reserveAPickupAppointmentLocation", this).text();

BUT

The value of this in your click callback will change value, so you’ll need to save it beforehand.

$(this).append("<img src=images/confirmAppointment.png class=confirmAppointment id=roommateAppointment>");
var self = this;
$(".confirmAppointment").click (function() {
    $(".confirmAppointment").unbind("click");
    var location = $(".reserveAPickupAppointmentLocation", self).text();
    alert (location);
});