Use case description of filter() method in jquery
May 09, 2018 am 10:15 AMThis time I will bring you a case description of the use of the filter() method in jquery. What are the precautions for using the filter() method in jquery? The following is a practical case, let's take a look.
Definition and usage
The filter() method returns elements that meet certain conditions.
This method lets you specify a condition. Elements that do not meet the criteria will be removed from the selection and elements that meet the criteria will be returned.
This method is usually used to narrow the scope of searching for elements in the selected element combination.
Tip: The filter() method is opposite to the not() method.
filter() filters based on the attributes in brackets. For example: $("p").filter("p")
This is not allowed. There are only some attributes in the filter brackets, or what they contain. It cannot be an element, such as "p"
//filter() --获取具有某些属性值的标签 :(指定的对象集合进行过滤) $("li").filter(".item-1") //获取class属性值为item-1的li元素 $("li").filter(":even").css("background", "red"); //获取所有偶数号的li元素,并将它们的背景颜色设为红色 $("li").filter(".item-1,#abc").css("background-color", "yellow"); //获取class属性值为item-1的所有li标签 ,同时获取id属性值为abc的所有li标签 $("p").filter(".selected, :first");//获取class属性值为selected的所有P标签,同时获取第一个P标签 //:contains() --获取标签里包含了某些文字的标签 (contains是判断文本的) //jQuery:has()和jQuery:contains()两个方法比较类似。不同点在于:has是判断标签的 contains是判断文本的 $("p p:contains('测试')").text(); //获取p标签下包含“测试”的p标签的text值 //打印一下,结果为“测试1 测试2” //alert($("p").contains("测试").text()); //不能这么用,提示错误“contains不是一个函数”
html
<p class="model_content" style=""> <p class="model_content_search layui-bg-gray"> <form class="layui-form"> <p class="layui-form-item fl" style="margin-top: 15px;"> <label class="layui-form-label" style="width:66px;">选择框</label> <p class="layui-input-inline" style="width:174px;"> <input id="search_val" class="layui-input" name="keyword" type="text" placeholder="请输入关键字"> </p> </p> <p class="layui-input-inline fl" style="margin-top: 15px;"> <button class="layui-btn">搜索</button> </p> <p class="clear"></p> </form> </p> <p class="search_result"> <p class="mapAddress"> <ul> <li> <p class="addressInfo"> <h3>要素大市场</h3> <span class="bold">地址:</span>徽州大道与锦绣大道交叉口<br> </p> </li> <li> <p class="addressInfo"> <h3>锦绣大道</h3> <span class="bold">地址:</span>徽州大道与锦绣大道交叉口<br> </p> </li> <li> <p class="addressInfo"> <h3>蜀山区</h3> <span class="bold">地址:</span>徽州大道与锦绣大道交叉口<br> </p> </li> <li> <p class="addressInfo"> <h3>瑶海区</h3> <span class="bold">地址:</span>徽州大道与锦绣大道交叉口<br> </p> </li> </ul> </p> </p> </p> //input中输入筛选 var $sub2 = $("#search_val"); $sub2.on("input", function () { var $iptVal2 = $sub2.val(); $(".mapAddress li").hide(); $(".mapAddress .addressInfo h3").filter(":contains('" + $iptVal2 + "')").parents("li").show(); });
I believe you have mastered the method after reading the case in this article, and there will be more exciting things. Please pay attention to other related articles on php Chinese website!
Recommended reading:
Detailed explanation of the use of filter() method in jquery
Detailed explanation of the use of event delegation in JS
The above is the detailed content of Use case description of filter() method in jquery. For more information, please follow other related articles on the PHP Chinese website!

Hot Article

Hot tools Tags

Hot Article

Hot Article Tags

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Detailed explanation of jQuery reference methods: Quick start guide

How to use PUT request method in jQuery?

How to remove the height attribute of an element with jQuery?

jQuery Tips: Quickly modify the text of all a tags on the page

Use jQuery to modify the text content of all a tags

Understand the role and application scenarios of eq in jQuery

How to tell if a jQuery element has a specific attribute?

Summary of commonly used file operation functions in PHP
