jQuery – Contains selector example
jQuery contains(text) selector is used to select all elements that are contains specified text.
Examples
1. $(‘p:contains(paragraph 1)’) – selects all elements matched by <p> that contains the text “paragraph 1”.
2. $(‘p:contains(mkyong)’) – selects all elements matched by <p> that contains the text “mkyong”.
3. $(‘li:contains(three)’) – selects all elements matched by <li> that contains the text “three”.
Play It
Click on the buttons to play around the contains selectors.
<html>
<head>
<title>jQuery contains selector example</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<style type="text/css">
#msg{
padding:8px;
hright:100px;
}
</style>
</head>
<body>
<h1>jQuery contains selector example</h1>
<div id="msg"></div>
<ul>
<li>One</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
</ul>
<p>
This is a paragraph 1 - google.com
</p>
<p>
This is a paragraph 2 - mkyong.com
</p>
<br/><br/>
<button>p:contains(paragraph 1)</button>
<button>p:contains(mkyong)</button>
<button>li:contains(three)</button>
<script type="text/javascript">
$("button").click(function () {
var str = $(this).text();
$('p, li').css("border", "0px solid #000000");
$(str).css("border", "1px solid #ff0000");
$('#msg').html("<h2>Button clicked : " + str + "</h2>");
});
</script>
</body>
</html>
About Author
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.
Please provide examples on ajax functions also…..