原生JS仿JQ的siblings()方法


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .menuList li {
            width: 20%;
            float: left;
            border-bottom: 1px solid #ccc;
            font-size: 24px;
            padding: 20px 0;
            text-align: center; 
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <ul class="menuList">
        <li class="menu">全部</li>
        <li class="menu">待支付</li>
        <li class="menu">待確認</li>
        <li class="menu">待入住</li>
        <li class="menu">已入住</li>
    </ul>

    <script type="text/javascript">
        function siblings(elem){ //參數elem就是想取誰的兄弟節點,就把那個元素傳進去 
            var nodes=[]; //定義一個數組,用來存elem的兄弟元素 
            var previ=elem.previousSibling; 
            while(previ){ //先取o的哥哥們 判斷有沒有上一個哥哥元素,如果有則往下執行 previ表示previousSibling 
                if(previ.nodeType===1){ 
                    nodes.push(previ); 
                } 
                previ=previ.previousSibling; //最后把上一個節點賦給previ 
            } 
            nodes.reverse(); //把順序反轉一下 這樣元素的順序就是按先后的了 
            var nexts=elem.nextSibling; //再取elem的弟弟 
            while(nexts){ //判斷有沒有下一個弟弟結點 nexts是nextSibling的意思 
                if(nexts.nodeType===1){ 
                    nodes.push(nexts); 
                } 
                nexts=nexts.nextSibling; 
            } 
            return nodes; //最后按從老大到老小的順序,把這一組元素返回 
        } 

        var nowMenu = document.getElementsByClassName("menu"); //獲取類名
        for(var i=0; i<nowMenu.length; i++){
            nowMenu[i].index = i;  //設置下標值
            nowMenu[i].onclick = function(){
                var index = this.index;  //獲取下標值
                var nowIndex = nowMenu[index];  //確認當前點擊的標簽
                for(var m=0; m<nowMenu.length-1; m++){
                    this.style.background = "#999";  //改變當前點擊元素背景
                    siblings(nowIndex)[m].style.background = "#ccc";  //改變當前點擊的兄弟元素背景
                }
            }
        }
    </script>
</body>
</html>

做項目的時候,要用原生JS寫,在做菜單點擊切換的時候不能用JQ的.siblings()方法了,所以就百度了一下,現在貼上來,方便以后查看。

鏈接:

http://www.qdfuns.com/notes/31329/38c5cd103df53dfea036a381c24bcf49

http://www.cnblogs.com/subying/p/3650934.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM