Can I get a jQuery object from an existing element

Question

I have a function

function toggleSelectCancels(e) {
       var checkBox = e.target;
       var cancelThis = checkBox.checked;

       var tableRow = checkBox.parentNode.parentNode;

}

how can I get a jQuery object that contains tableRow Normally I would go $("#" + tableRow.id), the problem here is the id for tableRow is something like this "x:1280880471.17:adr:2:key:[95]:tag:". It is autogenerated by an infragistics control. jQuery doesn't seem to getElementById when the id is like this. the standard dom document.getElementById("x:1280880471.17:adr:2:key:[95]:tag:") does however return the correct row element.

Anyways, is there a way to get a jQuery object from a dom element?

Thanks, ~ck in San Diego

Answer 1

You can call the jQuery function on DOM elements: $(tableRow)

You can also use the closest method of jQuery in this case:

var tableRowJquery = $(checkBox).closest('tr');

If you want to keep using your ID, kgiannakakis (below), provided an excellent link on how to escape characters with special meaning in a jQuery selector.

Answer 2

Absolutely,

$(tableRow)

http://docs.jquery.com/Core/jQuery#elements

Answer 3

jQuery can take the DOM elements, try with:

$(tableRow)

or

$(checkBox.parentNode.parentNode)

Answer 4

See this for how you should escape the id.

Answer 5

try:

var r = $(document.getElementById("XXXX----ID Of Your Row----XXXX"));

now, if document.getElementById doesn't return undefined you can use r as any regular jquery object.

Answer 6

You should be able to pass the element straight in, like this:

$(tableRow)...

I have tested this by creating a reference to a div, then passing it straight into jQuery and it creates the jQuery object for you.