js和jquery获取当前对象的子元素

最新推荐文章于 2024-05-29 21:52:44 发布

baimi2022

最新推荐文章于 2024-05-29 21:52:44 发布

阅读量474

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/MirageFox/p/5969753.html

版权

开发中经常遇到需要获取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;
                }
            });
        });

View Code

$("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;
                }
        }