jQuery UI is a web-based technology and consists of various GUI widgets, visual effects, and themes. These features can be implemented using the jQuery JavaScript Library. jQuery UI is the best tool for building UI interfaces for the webpages. It can also be used to build highly interactive web applications or can be used to add widgets easily.
In this article, we are going to learn the jQuery Mobile Filterable children option. The disabled option provides the list of children which will be processed during filtering.
Following are the multiple types supported by this option:
- String: This type is a jQuery selector that will be used to select from the children of the element.
- jQuery: This type is a jQuery object containing the list of elements to filter.
- Function: This type is a function that returns a jQuery object containing the list of elements to filter. It is also called with no arguments whenever filtering needs to be performed.
- Element: This type is a DOM element and it is a trivial application of the filter.
Syntax:
The children option takes an above-defined type of value and the syntax is as follows:
$( ".selector" ).filterable({ children: ".my-children" });-
Get the children option:
var children = $( ".selector" ).filterable( "option", "children" );
-
Set the children option:
$( ".selector" ).filterable( "option", "children", ".my-children");
CDN Link: Add these jQuery Mobile scripts that will be needed for your project.
<link rel=”stylesheet” href=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” />
<script src=”http://code.jquery.com/jquery-1.11.0.min.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>
Example: This example demonstrates the jQuery Mobile Filterable children option.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href=
<script src=
</script>
<script src=
</script>
<script>
$(document).ready(function () {
$(".items").filterable({});
$(".btnclass").bind("click", function () {
var children = $( ".items" )
.filterable( "option", "children" );
$("#divID").html("<b>List of Children:"
+ "<br>" + children + "</b>"
);
});
});
</script>
</head>
<body>
<center>
<div data-role="page" id="page1">
<div>
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>
jQuery Mobile Filterable children Option
</h3>
</div>
<div role="main" class="ui-content">
<div >
<ul class="items" style="list-style-type:none;">
<li>
target="_blank">
Data Structures
</a>
</li>
<li>
target="_blank">
Interview preparation
</a>
</li>
<li>
target="_blank">
Java Programming
</a>
</li>
</ul>
</div>
</div>
<input type="button" Value="Children Option"
class="btnclass" />
<br>
<div id="divID"></div>
</div>
</center>
</body>
</html>
|
Output:
jQuery Mobile Filterable children option
Reference: https://api.jquerymobile.com/filterable/#option-children