Question

How do I get img element out of this:

<td><img src="blah" /></td>

Thanks.

edit: what I mean is, the above is what I have when I loop through my each statement for each iteration and I want to get rid of the <td></td>. I’m not searching the entire document.

Further edit: Here is more code. I tried to cut to the heart of the problem but didn’t explain it well enough.

$(this).closest('tr').children().each(function(){
//some code

        });

That is my each function which gets all the td elements of a table row. In the case of text I can use the text() function to get the text, but when it is

    <td><img /></td>

I don’t know how to get the img out. Does that help explain?

Thanks

Answer 1

Re your further edit: Use find:

$(this).closest('tr').children().each(function(){
    // Get all `img` elements that are in this cell
    var $img = $(this).find("img");
});

---

Older answers before the question was clear:

Without more context, it’s hard to answer really well, but basically, use the jQuery() function (usually aliased as $()) with a CSS selector. So that might be:

var img = $("td img");

or only children

var img = $("td > img");

But note in both cases that you’ll get all img elements that are descendants (first example) or direct children (second example) of td elements.

Additionally, in both cases above, you’ll get a jQuery object which wraps a set of matching elements. To get at the actual underlying DOM elements, index into the object. So for instance, this will give you the very first img element that’s a descendant of a td element in your document:

var rawImgElement = $("td img")[0];

…and if there aren’t any, it’ll be undefined.

---

Re your edit:

…I want to get rid of the <td></td>

It’s still very unclear what you’re trying to achieve. Here’s an example that moves all img elements out of a table, putting them after it (since of course, you can’t just move the img elements out of the td elements, because img cannot be a direct child of tr).

HTML:

<table id="myTable">
<tbody>
<tr>
<td><img src="blah1.png"></img></td>
<td><img src="blah2.png"></img></td>
<td><img src="blah3.png"></img></td>
</tr>
</tbody>
</table>

JavaScript:

$(function() {
    var $myTable = $("#myTable");
    $("td > img").each(function() {
        var $img = $(this),
            $td = $img.parent();
        $img.insertAfter($myTable);
    });
});

…of course, then the table may be empty, and you may need to remove rows, etc.