jQuery中的筛选方法

最新推荐文章于 2022-04-21 11:15:42 发布

liurongsheng123

最新推荐文章于 2022-04-21 11:15:42 发布

阅读量564

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/liurongsheng123/article/details/79559648

前端专栏收录该内容

17 篇文章

订阅专栏

jQuery

jq中的筛选方法

next([]expr)

取得一个包含匹配的元素集合中每一个紧邻的后面同辈元素的元素集合
这个函数只返回那个紧邻的同辈元素,而不是后面所有的同辈元素(可以使用nextAll)

代码示例

<body>
    <p>Hello</p>
    <p>Hello Again</p>
    <div>
        <span>And Again</span>
    </div>
</body>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
    console.log($("p").next()[0]);
    console.log($("p").next()[1]);
</script>

结果截图

这里写图片描述

找到每个段落后面紧邻的同辈元素中类名为selected的元素

代码示例

<body>
    <p>Hello</p>
    <p class="selected">Hello Again</p>
    <div>
        <span>And Again</span>
    </div>
</body>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
    console.log($("p").next('.selected')[0]);
    console.log($("p").next('.selected')[1]);
</script>

结果截图

这里写图片描述

parent([expr])

取得一个包含着所有匹配元素的唯一父元素的元素集合
可以使用可选的表达式来筛选

代码示例

<body>
    <div>
        <p>Hello</p>
        <div>Hello</div>
    </div>
</body>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
    console.log($("p").parent()[0]);
    console.log($("p").parent()[1]);
</script>

结果截图

这里写图片描述

查找段落的父元素中每个类名为selected的父元素

代码示例

<body>
    <div>
        <p>Hello</p>
    </div>
    <div class="selected">
        <p>Hello Again</p>
    </div>
</body>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
    console.log($("p").parent(".selected")[0]);
    console.log($("p").parent(".selected")[1]);
</script>

结果截图

这里写图片描述

parents([expr])

取得一个包含着所有匹配元素的祖先元素的元素集合,可以通过一个
可选的表达式进行筛选

代码示例

<body>
    <div>
        <p>
            <span>Hello</span>
        </p>
        <span>Hello Again</span>
    </div>
</body>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
    console.log($("span").parents()[0]);
    console.log($("span").parents()[1]);
    console.log($("span").parents()[2]);
    console.log($("span").parents()[3]);
</script>

结果截图

这里写图片描述

找到每个span的所有是p元素的祖先元素

代码示例

<body>
    <div>
        <p>
            <span>Hello</span>
        </p>
        <span>Hello Again</span>
    </div>
</body>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
    console.log($("span").parents("p")[0]);
    console.log($("span").parents("p")[1]);
    console.log($("span").parents("p")[2]);
    console.log($("span").parents("p")[3]);
</script>

结果截图

这里写图片描述

prev([expr])

代码示例

<body>
    <div>
        <span>Hello Again1</span>
    </div>
    <p>Hello</p>
    <div>
        <span>Hello Again</span>
    </div>
    <p>AndAgain</p>
</body>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
    console.log($("p").prev()[0]);
    console.log($("p").prev()[1]);
</script>

结果截图

这里写图片描述

找到每个段落紧邻的前一个同辈元素中类名为selected的元素

代码示例

<body>
    <div>
        <span>Hello Again1</span>
    </div>
    <p>Hello</p>
    <div class="selected">
        <span>Hello Again</span>
    </div>
    <p>AndAgain</p>
</body>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
    console.log($("p").prev(".selected")[0]);
    console.log($("p").prev(".selected")[1]);
</script>

结果截图

这里写图片描述

siblings([expr])

获取同辈元素的元素集合,可以用可选的表达式进行筛选

代码示例

<body>
    <p>Hello</p>
    <div>
        <span>Hello Again</span>
    </div>
    <p>And Again</p>
</body>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
    console.log($("div").siblings()[0]);
    console.log($("div").siblings()[1]);
</script>

结果截图

这里写图片描述

找到每个div的所有同辈元素中带有类名为selected的元素

代码示例

<body>
    <p class="selected">And Again</p>
    <div>
        <span>Hello Again</span>
    </div>
    <p>Hello</p>

</body>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
    console.log($("div").siblings(".selected")[0]);
</script>

结果截图

这里写图片描述