jq兄弟选择器及节点

最新推荐文章于 2024-08-19 14:02:05 发布

The hang 土豆

最新推荐文章于 2024-08-19 14:02:05 发布

阅读量2.5k

点赞数

文章标签： servlet 前端 java

本文链接：https://blog.csdn.net/LiHang1234567777/article/details/126310965

版权

本文介绍了jQuery中的兄弟选择器，包括prevAll(), nextAll(), 和siblings()，并提供了相关示例。同时，讲解了节点操作，如append(), appendTo(), after(), before(), empty()和remove()的方法用法。" 48803923,5036415,UML建模在机房收费系统中的应用与体会,"['UML建模', '面向对象设计', '软件设计', '机房管理', '系统集成']

摘要由CSDN通过智能技术生成

什么是兄弟元素？

<ul id="list">
<li class="li-1">web前端</li>
<li class="li-2">web前端</li>
<li class="li-3">web前端</li>
<li class="li-4">web前端</li>
<li class="li-5">web前端</li>
</ul>

1、$(selector).prevAll( selector )

功能描述：获得集合中每个匹配元素的所有前面的兄弟元素，选择性筛选的选择器。

$(".li-3").prevAll("li"); // ['li-1','li-2']

2、$(selector).nextAll( selector )

功能描述：获得每个匹配元素集合中所有下面的同辈元素，选择性筛选的选择器。

$(".li-3").nextAll("li"); // ['li-4','li-5']

3、$(selector).siblings( selector )

功能描述：获得匹配元素集合中每个元素的兄弟元素,可以提供一个可选的选择器。

$(".li-3").siblings("li"); // ['li-1','li-2','li-4','li-5']

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
            list-style: none;
        }
        
        body {
            background-color: black;
        }
        
        div {
            width: 700px;
            border: 1px solid white;
            margin: 0 auto;
            padding-right: 50px;
        }
        
        ul {
            width: 680px;
            height: 100%;