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()方法.

  • 相关阅读:
    Spring MVC:框架及其组件介绍
    Goods:生成订单
    Goods:我的订单查询分页
    LeetCode:Kth Largest Element in an Array(need update)
    LeetCode:Swap Nodes in Pairs
    Goods:购物车条目加减数量实现
    LeetCode:Sum Root to Leaf Numbers
    Goods:购物车模块之全选按钮与条目之复选按钮的click事件
    Goods:查询某个用户的购物车条目以及添加购物车条目
    洛谷2387 NOI2014魔法森林(LCT维护最小生成树)
  • 原文地址:https://www.cnblogs.com/simpledev/p/3444090.html
Copyright © 2011-2022 走看看