实现寻找一个节点上面所有兄弟节点和下面所有兄弟节点

最新推荐文章于 2023-02-15 21:34:42 发布

~嘘~禁止想象~

最新推荐文章于 2023-02-15 21:34:42 发布

阅读量289

点赞数 1

分类专栏： # JavaScript小练习前端

本文链接：https://blog.csdn.net/weixin_45773503/article/details/113242583

版权

前端同时被 2 个专栏收录

150 篇文章 5 订阅

订阅专栏

JavaScript小练习

36 篇文章 1 订阅

订阅专栏

直接上栗子：
输出红色li元素上面和下面的节点
在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li class="a" style="background-color:red;"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        var li = document.querySelector('li.a');

        function nextElement(ele) {
            var oNext = ele.nextElementSibling || ele.nextSibling;
            return oNext.nodeType == 1 ? oNext : null;
        }

        function preElement(ele) {
            var oPrev = ele.previousElementSibling || ele.previousSibling;
            return oPrev.nodeType == 1 ? oPrev : null;
        }

        function eleIndexof(ele, index) {
            return ele.parentNode.children[index];
        }

        function nextAll(ele) {
            var arr = [];
            while (nextElement(ele)) {
                arr.push(nextElement(ele));
                ele = nextElement(ele);
            }
            return arr;
        }

        function prevAll(ele) {
            var arr = [];
            while (preElement(ele)) {
                arr.push(preElement(ele));
                ele = preElement(ele);
            }
            return arr.reverse();
        }
        console.log(eleIndexof(li, 5));
        console.log(prevAll(eleIndexof(li, 5)));
        console.log(nextAll(eleIndexof(li, 5)));
    </script>
</body>

</html>