JQuery detect if a tag is self closing

Question

Is there a way to detect if a tag is self closing with JQuery like an image tag? Something dynamic not just an image tag.

if ($('.selector')[0].tagName.toLowerCase()=="img") {
    // do something
}

Answer 1

You need a little background. The HTML markup that's sent across the wire is parsed by the browser into a DOM tree. At the point, the original markup is gone, served it's purpose, and no longer exists. When you do innerHTML on an element, that's not the literal HTML that generated the element, but the browser's serialization of that DOM subtree.

The point is, there is no different between <div /> and <div></div>. So just see if it has any children. If it doesn't, the element does have a possible XHTML representation that uses a self-closing tag.

element.children().length == 0

or as cletus says:

element.is(":empty")

Answer 2

jQuery uses this list internally:

/^(?:area|br|col|embed|hr|img|input|link|meta|param)$/i

You can do the same:

if(/^(?:area|br|col|embed|hr|img|input|link|meta|param)$/i.test($('.selector')[0].tagName)) {
//do something
}