Home > Web Front-end > JS Tutorial > body text

The usage of contains and the difference between find() and filter()

伊谢尔伦
Release: 2017-06-17 15:32:51
Original
4435 people have browsed it

$('div').filter('.div1');//Select the div element whose classattribute is div1 in the div tag

$('div'). find('em');//Select the element of the em tag in the div tag

filter() filters based on the attributes in brackets. For example: $("div").filter("p" ) This is not allowed. There are only some attributes in the filter brackets, or what they contain, which cannot be an element, such as "p"

and find() is to get certain elements.

<pre class="javascript" name="code"><html>
<head>
    <script src="jquery-2.1.3.js"></script>
</head>
<body>
    <div class="css"> <p class="rain">测试1</p> </div>
    <div class="rain"> <p>测试2</p> </div>
    <ul>
        <li>中国</li>
        <li>美国</li>
        <li>德国</li>
    </ul>
</body>
</html>
<script type="text/javascript">
    $(function () {
        //find()会在div元素内 寻找 class为rain 的元素。
        var a = $("div").find(".rain");  //相当于 var a= $("div[class=rain]");
        alert(a.length); //打印出:1
        var b = $("div").find("p"); //相当于 var b=$("div p");
        var c = $("div").children("p") //相当于 var c=$("div > p")
        
        
        //在li元素集合中筛选出包含"中国",或者包含"美国"的a元素,并计算这样的a有几个。
        var li_Count = $("li").filter(":contains(中国),:contains(美国)").length;
        alert(li_Count) //打印出:2
        var li_Value = $("li").filter(":contains(中国),:contains(美国)").text();
        alert(li_Value); //打印出:中国美国
        //find()会在div元素内 寻找 class为rain 的元素。
        $("div").filter(".css").css("color", "red");  //相当于 $("div[class=css]").css("color", "red");
    })
</script>
Copy after login
rrree

The above is the detailed content of The usage of contains and the difference between find() and filter(). For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template