zoukankan      html  css  js  c++  java
  • jquery div层级选择器

    div id="modelName" class="modelName">
                <!-- 车系的层  -->
                <div name="CX">
                        ------ 车系名称:<input name="txtcx" type="text" />
                         <a href="#" name="addCX">添加车系</a>  
                        
                        <div class="modelPL" id="modelPL">
                            <!-- 排量的层 -->
                            <div name="PL">
                                        -------- 排量:<input name="txtpl" type="text" />
                                        <a href="#" name="addPL">添加排量</a>
                                    
                                        <div id="modelDate" class="modelDate">
                                            <!--  生产年份的层  -->
                                                    <div name="SCNF">
                                                    ------ 生产年份:<input name="txtscnf" type="text" />
                                                     <a href="#" name="addNF">添加生产年份</a><br/><br/>
                                                    </div>
    
                                      </div>
                          </div>
                          <br /><br />
             
                        </div>
                    </div>
                     <br /><br />
         
    </div>

    如何取值方法?

    //保存触发事件
        $("#submit").click(function() {
            var CX = $("div[name=CX]");
            //alert("长度:"+CX.size());
            var str = "";
            var s1 = "";
            var s2 = "";
            var s3 = ""
            
            CX.each(function(){
                /**文本值*/
                var T1 = $(this).find("input[name=txtcx]");
                T1.each(function(){
                    alert("车系: " + $(this).val());
                    //str += $(this).val() + "@";
                    s1 += $(this).val() + "@";
                });
                
                
                //二级  车系的下一层DIV 
                var PL = $(this).find("#modelPL div[name=PL]");
                //alert("长度:" + PL.size());
                //alert("html:" + PL.html());
                PL.each(function(){
                    /**文本值*/
                    var T2 = $(this).find("input[name=txtpl]");
                    T2.each(function(){
                        //alert("!!排量: " + $(this).val());
                        //str += $(this).val() + "#";
                        s2 += $(this).val() + "#";
                    });
    
                    //三级 排量的下一层DIV
                    var NF = $(this).find("#modelDate div[name=SCNF] input[name=txtscnf]");
                    //alert("长度:" + NF.size());
                    //alert("html33:" + $(this).find("#modelDate div[name=SCNF]").html());
                    NF.each(function(){
                        alert("$$生产年份: " + $(this).val());
                        s3 += $(this).val() + "$";
                    });
                    s2 += s3 + "#";
                    s3 = "";
    
                });
                s1 += s2 + "@";
                s2 = "";
        
            });
            
            alert("str:" + s1);
            
        });
         
    });

    重要思想: 层级遍历div,一边定位div,一边取input值,分两步走, 关键是选择器的应用.
    在当前的遍历对象this中,关键是再次运用选择器. find()方法.

  • 相关阅读:
    MySQL 主主同步配置和主从配置步骤
    Nginx 禁止访问某个目录或文件的设置方法
    LNMP笔记:更改网站文件和MySQL数据库的存放目录
    centos最小安装 setuptools安装
    mkdir命令
    linux的mount(挂载)命令详解
    Java中wait()和notify()方法的使用
    剑指 offer面试题22 栈的压入和弹出序列
    剑指 offer面试题20 顺时针打印矩阵
    Leetcode 23.Merge Two Sorted Lists Merge K Sorted Lists
  • 原文地址:https://www.cnblogs.com/simpledev/p/3444090.html
Copyright © 2011-2022 走看看