How To Find Element By Text In Jquery

How To Find Element By Text In Jquery,Find element by text in jquery,Find element by text,Jquery,Find element by text example
Share it:
How To Find Element By Text In Jquery

Find element by text in jquery



In this topic, we will see how to find element by text in jquery. Many times we might want to find elements by text. This is really very simple to do in jquery.


Find element by text:-


Jquery allows us to find for a particular element by requesting elements containing specific text. We can’t achieve the same task easily using JavaScript in multiple browsers, so we will use jquery to perform this simple task and it saves us a lot of time.

Find element by text example:-

 In the following example, we will see how to select all <p> element that contains the text “Fail”. After selecting all the text we will use the jquery CSS method to set the background color.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
        $('p:contains("Fail")').css('background-color','lightgreen');
        });
    </script>
<body>
<p>Ajay parvin - pass</p>
<p>Rakash - Fail</p>
<p>Arvind - Fail</p>
<p>Udhaya Kumar - Pass</p>
</body>
</html>



Output:-


Ajay parvin - pass

Rakash - Fail

Arvind - Fail
Udhaya Kumar - Pass

                                 $(‘p:contains(“Fail”)’).css(‘background-color’,’lightgreen’);


$(‘p:contains(“Fail”)’).css(‘background-color’,’lightgreen’); This the line tells jquery to select all <p> element that contains “Fail” text and set the background color to light green. So here jquery will select second and third <p> elements and change their background colors


                                     Share this article with your friends                        
Share it:

jQuery

Post A Comment:

0 comments: