1. div id="modelName" class="modelName">
  2. <!-- 车系的层 -->
  3. <div name="CX">
  4. ------ 车系名称:<input name="txtcx" type="text" />
  5. <a href="#" name="addCX">添加车系</a>
  6.  
  7. <div class="modelPL" id="modelPL">
  8. <!-- 排量的层 -->
  9. <div name="PL">
  10. -------- 排量:<input name="txtpl" type="text" />
  11. <a href="#" name="addPL">添加排量</a>
  12.  
  13. <div id="modelDate" class="modelDate">
  14. <!-- 生产年份的层 -->
  15. <div name="SCNF">
  16. ------ 生产年份:<input name="txtscnf" type="text" />
  17. <a href="#" name="addNF">添加生产年份</a><br/><br/>
  18. </div>
  19.  
  20. </div>
  21. </div>
  22. <br /><br />
  23.  
  24. </div>
  25. </div>
  26. <br /><br />
  27.  
  28. </div>

如何取值方法?

  1. //保存触发事件
  2. $("#submit").click(function() {
  3. var CX = $("div[name=CX]");
  4. //alert("长度:"+CX.size());
  5. var str = "";
  6. var s1 = "";
  7. var s2 = "";
  8. var s3 = ""
  9.  
  10. CX.each(function(){
  11. /**文本值*/
  12. var T1 = $(this).find("input[name=txtcx]");
  13. T1.each(function(){
  14. alert("车系: " + $(this).val());
  15. //str += $(this).val() + "@";
  16. s1 += $(this).val() + "@";
  17. });
  18.  
  19. //二级 车系的下一层DIV
  20. var PL = $(this).find("#modelPL div[name=PL]");
  21. //alert("长度:" + PL.size());
  22. //alert("html:" + PL.html());
  23. PL.each(function(){
  24. /**文本值*/
  25. var T2 = $(this).find("input[name=txtpl]");
  26. T2.each(function(){
  27. //alert("!!排量: " + $(this).val());
  28. //str += $(this).val() + "#";
  29. s2 += $(this).val() + "#";
  30. });
  31.  
  32. //三级 排量的下一层DIV
  33. var NF = $(this).find("#modelDate div[name=SCNF] input[name=txtscnf]");
  34. //alert("长度:" + NF.size());
  35. //alert("html33:" + $(this).find("#modelDate div[name=SCNF]").html());
  36. NF.each(function(){
  37. alert("$$生产年份: " + $(this).val());
  38. s3 += $(this).val() + "$";
  39. });
  40. s2 += s3 + "#";
  41. s3 = "";
  42.  
  43. });
  44. s1 += s2 + "@";
  45. s2 = "";
  46.  
  47. });
  48.  
  49. alert("str:" + s1);
  50.  
  51. });
  52.  
  53. });

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

jquery div层级选择器的更多相关文章

  1. Jquery操作层级选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. jQuery的层级选择器

    <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8 ...

  3. JQuery学习笔记——层级选择器

    JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...

  4. 什么是 jQuery 和jQuery的基本选择器,层级选择器,基本筛选器

    jQuery是什么? [1]   jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. [2]   jQuery是继prototype ...

  5. 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器

    × 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...

  6. Jquery | 基础 | 慕课网 | 层级选择器

    选择器中的层级选择器处理关系类型: 子元素 后代元素 兄弟元素 相邻元素 <!DOCTYPE html> <html> <head> <meta http-e ...

  7. js进阶 10-5 jquery中的层级选择器有哪些

    js进阶 10-5 jquery中的层级选择器有哪些 一.总结 一句话总结: 1.jquery中的层级选择器有哪些? 四种,后代,子代,兄弟,相邻兄弟 2.如何区别jquery中的层级选择器? 记住这 ...

  8. jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

    jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...

  9. jquery 层级选择器

    关于层级选择器. $("parent > child") 选择所有指定“parent”元素中指定的“child”的直接子项元素. parent :任何有效的选择器. chil ...

随机推荐

  1. HTTP Status 500 - An exception occurred processing JSP page /WEB-INF

    HTTP Status 500 - An exception occurred processing JSP page /WEB-INF/test/showCountry.jsp at line 11 ...

  2. java8个基本类型和它们所占的字节数

    byte : 1字节 short : 2字节 int : 4字节 float :4字节 long : 8字节 double : 8字节 char :2字节 boolean : 1字节 补充说明:在实际 ...

  3. [WinForm]TextBox只能输入数字或者正浮点型数字

    关键代码: /// <summary> /// 只能输入数字[KeyPress事件] /// </summary> /// <param name="textB ...

  4. Mongodb 级联删除查询操作

    ObjRelationPojo表一条记录 public class YpObjRelationPojo implements Serializable { @Id private String id; ...

  5. SQLServer数据库表中将指定列分组转一行

    不说明,直接看代码: --1. 创建表,添加测试数据 CREATE TABLE #test(code varchar(50), [values] varchar(10)) INSERT #test S ...

  6. NOSQL之【redis的安全策略】

    原文:http://redis.io/topics/security 1.Redis的安全模式 可信环境下的可信用户才可访问redis.这意味着,将redis服务器直接暴露在Internet或者不可信 ...

  7. LANMP 如何禁止访问 .htaccess 文件

    很多朋友问我,为什么他已经在 Apache 规则里面加了禁止别人直接下载 .htaccess 文件,为什么还是可以下载? 其实这个很简单,因为 .htaccess 在 LANMP 环境下,当他作为文件 ...

  8. MvvmCross for WPF File Plugin

    本文以MvvmCross为框架基础 最近用了File Plugin插件,一开始也是没用明白,写一下记录下来,也方便需要的人吧 首先这个File Plugin需要先在UI项目里创建一个Bootstrap ...

  9. zendframework 事件管理(一)

    zend里的事件管理器主要是为了实现: 1.观察者模式 2.面向切面设计 3.事件驱动构架 事件管理最基本的功能是将监听器与事件连接或断开.不论时连接还是断开都是通过shared collection ...

  10. MyEclipse反编译Class文件

    对于需要查看Java Class文件源码的筒子们来说,必须在项目中导入Java源码才能查看Class文件的具体实现,这不仅十分的麻烦,因为有时我们并不可以获得Class文件对应的Java源码.今天就给 ...