jquery performing a selector on an element variable

Question

I'm having difficulty with performing a selector operation on an element variable. First I'm selecting my table element in my page using jquery.

var $popup = null;
$popup = $("#popup_List");

<div id="popup" class="popup_block">
    <table id="popup_List"><tr><td>Name</td></tr></table>
</div>

I'm trying to perform a selector operation on the $popup variable. The following does not work

$popup("tr:last").after("<tr><td>Name</td></tr");

I'd like to use the variable approach because $("#popup_List") would have to be referenced numerous times in the code otherwise.

Solution 1

$popup.find("tr:last").after("<tr><td>Name</td></tr");

Solution 2

var last = $("tr:last", popup);

just pass in the context for the jquery() method.

Solution 3

You don't need to prefix with $ on your variable, only when you are instantiating the jquery object:

var popup = $("#popup_List");
var last = popup.find("tr:last");

By the way, it is odd that you have the 'L' in List capitalized. This might lead to bugs, so I'd go with popup_list for consistency.