Open In App

jQuery Mobile Filterable children Option

Last Updated : 26 Jan, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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.

HTML




<!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>
                            <a href="https://www.geeksforgeeks.org/data-structures"
                            target="_blank">
                                Data Structures
                            </a>
                        </li>
                        <li>
                            target="_blank">
                                Interview preparation
                            </a>
                        </li>
                        <li>
                            <a href="https://www.geeksforgeeks.org/java"
                            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

jQuery Mobile Filterable children option

Reference: https://api.jquerymobile.com/filterable/#option-children



Previous Article
Next Article

Similar Reads

jQuery Mobile Filterable filterTheme Option
jQuery Mobile is an HTML5 based user interface system designed to make responsive websites and apps that are accessible on all smartphone, tablet, and desktop devices. Filterable is a widget that can filter the children of any element. A Form, List, etc can be filtered with the help of filterable. A search bar appears at the top of the List where t
2 min read
jQuery Mobile Filterable option() Method
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
3 min read
jQuery Mobile Filterable disabled Option
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
2 min read
jQuery Mobile Filterable filterReveal Option
jQuery Mobile is an HTML5 based user interface system designed to make responsive websites and apps that are accessible on all smartphone, tablet, and desktop devices. Filterable is a widget that can filter the children of any element. A Form, List, etc can be filtered with the help of filterable. A search bar appears at the top of the List where t
2 min read
jQuery Mobile Filterable filterPlaceholder Option
jQuery Mobile is an HTML5 based user interface system designed to make responsive websites and apps that are accessible on all smartphone, tablet, and desktop devices. Filterable is a widget that can filter the children of any element. A Form, List, etc can be filtered with the help of filterable. A search bar appears at the top of the List where t
2 min read
jQuery Mobile Filterable input Option
jQuery Mobile is an HTML5 based user interface system designed to make responsive websites and apps that are accessible on all smartphone, tablet, and desktop devices. Filterable is a widget that can filter the children of any element. A Form, List, etc can be filtered with the help of filterable. A search bar appears at the top of the List where t
2 min read
jQuery Mobile Filterable defaults Option
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
2 min read
jQuery Mobile Filterable classes Option
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
2 min read
jQuery Mobile Filterable enhanced Option
jQuery Mobile is an HTML5 based user interface system designed to make responsive websites and apps that are accessible on all smartphone, tablet, and desktop devices. Filterable is a widget that can filter the children of any element. A form, list, etc can be filtered with the help of filterable. A search bar appears at the top of the list where t
2 min read
jQuery Mobile Filterable Widget Complete Reference
jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. The Filterable widget is used to filter the children of an element. jQuery Mobile Filterable Widget Options jQuery Mobile Filterable children OptionjQuery Mobile Filterable classes OptionjQuery Mobile Filterable de
1 min read