Find Element by Content using jQuery

by

Using jQuery :contains() Selector you will learn how to find element by text in jquery using contains selector. Many times we need to get that element which have a text value so here we can use jQuery :contains Selector to get those element easily. The :contains() selector selects elements containing the specified string.

As with attribute value selectors, text inside the parentheses of :contains() can be written as a bare word or surrounded by quotation marks. The text must have matching case to be selected. Let’s see jquery find the element by text easy way.

You can use the :contains() selector to get elements based on their content.

jQuery Find Element by Text Example

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    </head>
    <body>
        <div class="container">
           <div class="content-note">
               <span>This is span content.</span>
               <p> This is p tag conetnt.</p>
               <div class="div-cotent">This is div content.</div>
           </div>
        </div>
        <script>
            // find span by content
            $('.content-note span:contains("span content")');

            // find p tag by content
            $('.content-note p:contains("p tag")');

            // find div by content
            $('.div-cotent:contains("div content")');

        </script>
    </body>
</html>

If you log these examle find the element by text you can get below output in your console with element length.

S.fn.init [span, prevObject: S.fn.init(1)]
S.fn.init [p, prevObject: S.fn.init(1)]
S.fn.init [div.div-cotent, prevObject: S.fn.init(1)]

If your have only parent class and your content is insive multiple div inside and you want to get only that element using jquery then you must use the below example “:last” for this. Just see the example..

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    </head>
    <body>
        <div class="container">
           <div class="content-note">
               <div class="row">
                   <div class="col-12">
                       <div class="">
                           <span>This span is testing</span>
                        </div>
                       <span>This is span content.</span>
                   </div>
               </div>
           </div>
        </div>
        <script>
            // get span by content
            $('.content-note :contains("This is span content"):last');
        </script>
    </body>
</html>

If you console.log this then you will get the last span element easily.

Leave a Comment