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
Comments