How can I know if an element is a direct child of the body using jQuery

Related searches

I want to perform some action on elements that are not direct child of the body. How can I check a particular element to know whether its partent is the body.


You can test the tag name this way :


Child Selector (“parent > child”), To Donate, see this list of organizations to support from Reclaim the Block Description: Selects all direct child elements specified by "child" of elements of the descendant combinator (E F) in that it selects only first-level descendants. < body>. <ul class="topnav">. <li>Item 1</li>. <li>Item 2. <ul>. <li>Nested item 1</li >. The elements in the collection are sorted as they appear in the source code and can be accessed by index numbers. The index starts at 0. Tip: You can use the length property of the HTMLCollection object to determine the number of child elements, then you can loop through all children and extract the info you want.

The > denotes a direct child. $('body > *') gives you all children of the body tag, so you could always invert that with a :not( ): $('*:not(body > *)'); however that might be pretty slow.

filter( ) would also work for you and may be faster: $('body *').filter(function(){ return $(this).parent('body') });

Either of the above should give you a complete set of all elements that are not children of the body tag.

Note that there could potentially be a huge number of elements selected here; you will want to make your selectors as specific as possible for performance and you should probably avoid wildcards, which I used for the sake of the examples above.

.children(), To Donate, see this list of organizations to support from Reclaim the Block Given a jQuery object that represents a set of DOM elements, the .children() If the selector is supplied, the elements will be filtered by testing whether they match it. <body>. <div id="container">. <div>. <p>This <span>is the <em>way< /em>� The $.contains() method returns true if the DOM element provided by the second argument is a descendant of the DOM element provided by the first argument, whether it is a direct child or nested more deeply. Otherwise, it returns false. Only element nodes are supported; if the second argument is a text or comment node, $.contains() will return

simply you can use the parent function jquery('#yourElement').parent(); if it gives you body tag than you can find that its direct child of body.

:has() Selector, Description: Selects elements which contain at least one element that if a <p> exists anywhere among its descendants, not just as a direct child. For better performance in modern browsers, use $( "your-pure-css-selector" <body>. <div ><p>Hello in a paragraph</p></div>. <div>Hello again! (with no paragraph)</div >. Note also that like most jQuery methods, .children() does not return text nodes; to get all children including text and comment nodes, use .contents(). The .children() method optionally accepts a selector expression of the same type that we can pass to the $() function. If the selector is supplied, the elements will be filtered by testing

if ( $(this).parent()[0].nodeName.toLowerCase() == "body" ) 
// do stuff here

:first-child Selector, Description: Selects all elements that are the first child of their parent. Example: Finds the first span in each matched div to underline and add a hover state. Selects every <p> element that is the only <p> element of its parent:only-child: p:only-child: Selects every <p> element that is the only child of its parent:optional: input:optional: Selects input elements with no "required" attribute:out-of-range: input:out-of-range: Selects input elements with a value outside a specified range::placeholder

Lots of good answers. If you are interested in chaining, here is yet another possibility that uses parent() and the :not() selector.

var $possible_targets = [...]; // all the elements you want to check
function do_something_to_target() { 
    [...]; // insert blinking text code here! 


jQuery children() Method, Example. Return elements that are direct children of <ul>: body (great- grandparent) To return all children including text nodes, use the contents() method. The elements will be filtered by testing whether they match this selector; all parts of the selector must lie inside of an element on which .find() is called. The expressions allowed include selectors like > p which will find all the paragraphs that are children of the elements in the jQuery object. Consider a page with a basic nested list on it:

Unlike other filtering methods, .is() does not create a new jQuery object. Instead, it allows you to test the contents of a jQuery object without modification. This is often useful inside callbacks, such as event handlers. Suppose you have a list, with two of its items containing a child element:

Description: Selects all direct child elements specified by "child" of elements specified by "parent". version added: 1.0 jQuery( "parent > child" ) parent: Any valid selector. child: A selector to filter the child elements.

Definition and Usage. The find() method returns descendant elements of the selected element. A descendant is a child, grandchild, great-grandchild, and so on.

  • It's jQuery, with a capital Q. ;-)