Find nested DOM elements using jQuery

Question

I need to find specific elements in my DOM using JQuery.

The case is:

var dialog = $(DOM.loadHTML("amc-refine", "scripts/dialogs/amc-dialog.html"));
elmts = DOM.bind(dialog);

So elmts here is a variable with the DOM elements .. i have a table that i can access it using

$(elmts.dialogTable)

using jQuery i would like to reach nested elements inside this table .. for example i want to do the following

$('#example thead tr').each( function () {
        this.insertBefore( nCloneTh, this.childNodes[0] );
    } );

but i cant access my table using the # .. so can i do this:

$(elmts.dialogTable).find('thead').find('tr')

moreover, what if i want to reach also

$('#example tbody td img')

using the same $(elmts.dialogTable)

Best Regards

You can search inside the loaded dom, like `$("thead tr",elmts.dialogTable)` - but im not quite sure whats inside your DOM... Could you paste the content of amc-dialog.html? — Marco Johannesen, Oct 27 '11 at 10:03
I think the link below is related to your query: http://stackoverflow.com/questions/376081/how-to-get-a-table-cell-value-using-jquery — smukh, Oct 27 '11 at 10:10

score 2 · Accepted Answer · answered Oct 27 '11 at 10:02

You should be able to still use find, and pass the entire selector to it:

var img = $(elmts.dialogTable).find('tbody td img');

You don't need to call find multiple times as you have done in your example. Your example could be rewritten to just use find('thead tr').

Alternatively, you could use elmts.dialogTable as the context in which to select:

var img = $("tbody td img", elmts.dialogTable);

score 1 · Answer 2 · answered Oct 27 '11 at 10:07

1

This should be possible:

$('#example thead tr', elmts.dialogTable).each( function () {
        this.insertBefore( nCloneTh, this.childNodes[0] );
    } );

The second parameter means context.

answered Oct 27 '11 at 10:07

Bojan Bjelic

2 Answers2