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

 

posted @ 2013-11-26 20:45  全新时代-小小程序员大梦想  阅读(836)  评论(1编辑  收藏  举报