JQuery Content Filter are used to select elements based on text.
jQuery(":contains(text)")
:contains filter is used to select all the elements having specified text content.
Example given below applies red color border to all p having Core content.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="bootstrap-4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="jquery-3.3.1/jquery-3.3.1.min.js"></script>
<script src="bootstrap-4.2.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container" ng-app="myApp" ng-controller="MyController" ng-cloak>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"> </a>
</nav>
<div class="row">
<p class="col-md-12">
.NET Core 1.0 was released on June 27, 2016.
</p>
<p class="col-md-12">
.NET 2.0 was released on August 14, 2017.
</p>
<p class="col-md-12">
.NET Core 3 was announced on May 7, 2018.
</p>
<p class="col-md-12">
.NET fully supports C# and F# and partially supports Visual Basic .NET.
</p>
</div>
</div>
</div>
<script>
$(function () {
$("p:contains('Core')").css("border", "1px solid #f00");
});
</script>
</body>
</html>
jQuery(":empty")
:empty filter is used to select all elements that have no children (including text nodes). This is the inverse of :parent filter.
Following example will find all elements that are empty i.e. don't have child elements or text.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="bootstrap-4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="jquery-3.3.1/jquery-3.3.1.min.js"></script>
<script src="bootstrap-4.2.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container" ng-app="myApp" ng-controller="MyController" ng-cloak>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"> </a>
</nav>
<div class="row">
<table border="1">
<tr><td>TD 0</td><td></td></tr>
<tr><td>TD 2</td><td></td></tr>
<tr><td></td><td>TD5</td></tr>
</table>
</div>
</div>
<script>
$(function () {
$("td:empty").css("background", "rgb(225,225,200)");
});
</script>
</body>
</html>
jQuery(":has(selector)")
:has filter select those elements, which contain at least one element that matches the specified selector. we can pass any jQuery selector as an argument to :has() filter.
Example below will apply red border around all p having class col-md-12.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="bootstrap-4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="jquery-3.3.1/jquery-3.3.1.min.js"></script>
<script src="bootstrap-4.2.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container" ng-app="myApp" ng-controller="MyController" ng-cloak>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"> </a>
</nav>
<div class="row">
<div class="col-md-12">
.NET Core 1.0 was released on June 27, 2016.
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>.NET 2.0 was released on August 14, 2017.></p>
</div>
</div>
<div class="row">
<div class="col-md-12">
.NET Core 3 was announced on May 7, 2018.
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>.NET fully supports C# and F# and partially supports Visual Basic .NET.</p>
</div>
</div>
</div>
<script>
$(function () {
$(".col-md-12:has('p')").css("border", "1px solid #f00");
});
</script>
</body>
</html>
jQuery(":parent")
:parent filter select all elements that have at least one child node either an element or text. his is the inverse of :empty filter.Following example will finds all td with children, including text and apply background color css property.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="bootstrap-4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="jquery-3.3.1/jquery-3.3.1.min.js"></script>
<script src="bootstrap-4.2.1/js/bootstrap.bundle.min.js"></script>
<style>
table tr td { width:200px; }
</style>
</head>
<body>
<div class="container" ng-app="myApp" ng-controller="MyController" ng-cloak>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"> </a>
</nav>
<div class="row">
<table border="1">
<tr><td>Value 1</td><td></td></tr>
<tr><td>Value 2</td><td></td></tr>
</table>
</div>
</div>
<script>
$(function () {
$("td:parent").css("background", "rgba(255,0,0,0.5)");
});
</script>
</body>
</html>
If you have any query or question or topic on which, we might have to write an article for your interest or any kind of suggestion regarding this post, Just feel free to write us, by hit add comment button below or contact via Contact Us form.
Your feedback and suggestions will be highly appreciated. Also try to leave comments from your valid verified email account, so that we can respond you quickly.