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