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


    开发中经常遇到需要获取ul下的il对象,个人总结了jsjquery的方法。

    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;
                    }
            }
    View Code

    JS获取子元素用链式调用,DOM.getElement.._Parent.getElement.._Child;(dom.父元素.子元素)

    小结:个人觉得js的调用方式比jquery方便,通过链式调用便可获取元素子集。

  • 相关阅读:
    Java并发编程:同步容器
    Java并发编程:深入剖析ThreadLocal
    使用jQuery开发一个响应式超酷整合RSS信息阅读杂志
    Javascript 严格模式
    参数传递的四种形式----- URL,超链接,js,form表单
    《CSS 设计指南》学习笔记 一
    【BootStrap】初步教程
    JavaScript日期对象使用总结
    Web前端知识技能大汇总
    浏览器 CSS Hack 收集
  • 原文地址:https://www.cnblogs.com/MirageFox/p/5969753.html
Copyright © 2020-2023  润新知