js和jquery獲取當前對象的子元素

開發中經常遇到需要獲取ul下的il對象，個人總結了js和jquery的方法。

HTML片斷：

    <ul class="box">
        <li>子元素1</li>
        <li>子元素2</li>
        <li>子元素3</li>
        <li>子元素4</li>
        <li>子元素5</li>
    </ul>

先說說jquery的解決方案：

        //獲取li內容
        function getLi(obj,index){
            var child = obj.children("li").eq(index);
            return child.html();
        }
        $(function(){
            var c = 0;
            $(".box").click(function(){
                if(c == 0){
                    console.log(getLi($(this),c));
                    c++;
                }else if(c == 1){
                    console.log(getLi($(this),c));
                    c++;
                }else if(c == 2){
                    console.log(getLi($(this),c));
                    c++;
                }else if(c == 3){
                    console.log(getLi($(this),c));
                    c++;
                }else if(c == 4){
                    console.log(getLi($(this),c));
                    c = 0;
                }
            });
        });

$("elementName").children();獲取當前對象的子元素(集合)，若子元素有且只有一個就直接通過children()獲取。若子元素有多個children()獲取的就是一個集合，獲取具體一個子元素就需要eq();獲取。

再來看看JavaScript的解決方案：

        var c = 0;
        var childArr = document.getElementsByClassName("box")[0].getElementsByTagName("li");
        document.getElementsByClassName("box")[0].onclick = function(){
            if(c == 0){
                    console.log(childArr[c].innerHTML);
                    c++;
                }else if(c == 1){
                    console.log(childArr[c].innerHTML);
                    c++;
                }else if(c == 2){
                    console.log(childArr[c].innerHTML);
                    c++;
                }else if(c == 3){
                    console.log(childArr[c].innerHTML);
                    c++;
                }else if(c == 4){
                    console.log(childArr[c].innerHTML);
                    c = 0;
                }
        }

JS獲取子元素用鏈式調用，DOM.getElement.._Parent.getElement.._Child;(dom.父元素.子元素)。

小結：個人覺得js的調用方式比jquery方便，通過鏈式調用便可獲取元素子集。