jquery选择指定元素之外的所有元素

最近的项目中有这么一个需求，点击一排图片中的任意一张后底部弹出一个对话框，要求点击任意地方隐藏对话框

这个时候用not()显然是不现实的，用closest()可以实现差不多的功能

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>选择指定元素外的其他所有元素</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .box{
                border: 1px solid red;
                overflow: hidden;
            }
            .box > div{
                height: 100px;
                width: 100px;
                background-color: cadetblue;
                float: left;
                margin-left: 10px;
            }
            .box > div > div{
                height: 50px;
                width: 50px;
                background-color: coral;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="num1">
                <div></div>
            </div>
            <div class="num2">
                <div></div>
            </div>
            <div class="num3">
                <div></div>
            </div>
        </div>
        <script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
        <script>
            $(document).click(function(e){
                if( $(e.target).closest('.num2').length == 0 ){
                    alert("事件触发");
                }
            });
        </script>
    </body>
</html>

关键知识点：jquery closest()

closest():在DOM树中从当前元素开始向上寻找（包括当前元素），并用匹配元素构建一个新的jquery对象

参考：http://www.w3school.com.cn/jquery/traversing_closest.asp

posted @ 2016-12-23 15:03  喜欢骑车的大冬瓜  阅读(2292)  评论(1)  编辑  收藏  举报