Filtering by Content

jQuery's available content filters.

Type	Description
:contains()	Selects all elements that contain the specified text.
:empty	Select empty elements from the DOM.
:has()	Select elements which contain at least one element that matches the specified selector.
:parent	Selects all elements that are the parent of another element, including text nodes.

Using :contains() filter you can select an element that contains a matching text directly inside the element, inside of a descendant, or even a combination of both.

The following code sample illustrates a use of contains. It selects all paragraphs that contain the text string "test" and stores them in a variable test.

 
<!DOCTYPE html> 
<html>
    <head>
        <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"> 
        </script>
        <script>
            $(function(){ 
                var test = $("p:contains('test')").length; 
                document.writeln(test); 
            });
        </script> 
    </head> 
    <body>
        <p>test </p> 
        <p>this is a test</p> 
        <p>another test</p> 
    </body> 
</html>

Click to view the demo

A related selector, :has(), returns elements that contain at least one element that matches the specified selector.

This allows you to select elements that have a descendent selector of a certain type amongst any of its children.

The following code sample illustrates using :has() to select a div that contains a paragraph as one of its many children out of all the divs on a page.

 
<!DOCTYPE html> 
<html>
    <head>
        <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"> 
        </script>
        <script> 
            $(function() { 
                var hasDemo = $("div:has('p')").attr("id"); 
                document.writeln(hasDemo); 
            }); 
        </script> 
    </head> 
    <body> 
        <div id="yay"> 
            <ul>
                <li> 
                    <p>A</p> 
                    <p>B</p> 
                    <p>C</p> 
                </li>
            </ul> 
        </div> 
        <div id="nay">
            <ul>
                <li>D</li> 
            </ul> 
        </div> 
    </body> 
</html>

Click to view the demo

If you want to select an element that doesn't contain anything, you can use the :empty() selector. This selector returns all elements that contain no children. This includes text.

 
<!DOCTYPE html> 
<html>
    <head>
        <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"> 
        </script>
        <script>
            $(function(){ 
                var nothing = $("p:empty").length; 
                document.writeln(nothing) //returns 1
            });
        </script> 
    </head> 
    <body>
        <div> 
            <p></p> 
            <p>something here</p>
        </div> 
    </body> 
</html>

Click to view the demo

The opposite of :empty() is :parent(). It selects elements that have children.

The following code shows an example of using :parent() selecting a single div with children and logging the div's ID.

 
<!DOCTYPE html> 
<html>
    <head>
        <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"> 
        </script>
        <script>
            $(function(){ 
                var parentDemo = $("div:parent"); 
                document.writeln(parentDemo.attr("id")) //returns proudParent
            });
        </script> 
    </head> 
    <body>
        <div id="empty"></div> 
        <div id="proudParent"> 
            <ul>
                <li> Children! </li> 
            </ul> 
        </div> 
    </body> 
</html>

Click to view the demo

It's important to note that :parent() will select elements that contain child text nodes. This can include text nodes with just whitespace text.

 
<!DOCTYPE html> 
<html>
    <head>
        <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"> 
        </script>
        <script>
            $(function(){ 
                var parents = $("div:parent").length; 
                document.writeln(parents) //returns 2
            });
        </script> 
    </head> 
    <body> 
        <div id="empty"> 
        </div> 
        <div id="proudParent">
            <ul>
                <li> Children! </li> 
            </ul> 
        </div> 
    </body> 
</html>

Click to view the demo

Home
JavaScript Book
jQuery

Selector: