zoukankan      html  css  js  c++  java
  • Jquery中each的三种遍历方法

    1、选择器+遍历

    $('div').each(function (i){

       i就是索引值

       this 表示获取遍历每一个dom对象

    });


    2、选择器+遍历

    $('div').each(function (index,domEle){

       index就是索引值

      domEle 表示获取遍历每一个dom对象

    });


    3、更适用的遍历方法


    1)先获取某个集合对象

    2)遍历集合对象的每一个元素


    var d=$("div");


    $.each(d,function (index,domEle){


      d是要遍历的集合

      index就是索引值

      domEle 表示获取遍历每一个dom对


    });


    案例:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>属性选择器学习</title>

    <script language="javascript" type="text/javascript" src="../include/jquery.js"></script>


    <script language="javascript" type="text/javascript">


    //使用jquery加载事件

    $(document).ready(function (){


    //<input id="btn0" type="button" value="利用jquery对象实现 修改表单中可见的文本域的值  $('input[type=text]:enabled')" />


    $("#btn0").click(function (){


    //当点击按钮后,设置id=two的div的背景颜色是绿色

    $("input[type=text]:enabled").each(function(index,domEle){


    //domEle.value="xxxxx";

    $(domEle).val("xxxxxxxx");


    });


    });


    //<input id="btn1" type="button" value="利用jquery对象实现 修改表单中不可修改的文本域的值  $('input[type=text]:disabled')" />


    $("#btn1").click(function (){


    //当点击按钮后,设置id=two的div的背景颜色是绿色

    $("input[type=text]:disabled").each(function(index,domEle){


    //domEle.value="xxxxx";

    $(domEle).val("xxxxxxxx");


    });


    });


    //<input id="btn2" type="button" value="利用jquery对象实现 获取选中的复选框的个数 $('input[type=checkbox]:checked')" />


    $("#btn2").click(function (){


    //当点击按钮后,设置id=two的div的背景颜色是绿色

    alert($("input[type=checkbox]:checked").length);


    /*

    $("input[type=checkbox]:checked").each(function(index,domEle){


    //alert(domEle.value);

    //alert(this.value);

    //alert($(this).val());

    });


    */


    });

    //<input id="btn3" type="button" value="利用jquery对象实现 获取选中的下拉菜单的内容  $('select option:selected')" />

    $("#btn3").click(function (){


    //当点击按钮后,设置id=two的div的背景颜色是绿色

    $("select option:selected").each(function(index,domEle){


    //domEle.value="xxxxx";

    alert($(domEle).text());


    });

    });

    });

    </script>

    </head>

    <body>

    <form method="post" action="">

    <input type="text" value="可见元素1"  />

    <input type="text" value="不可见元素1" disabled="disabled"  />

    <input type="text" value="可见元素2"  />

    <input type="text" value="不可见元素2"  disabled="disabled" /><br>

    <input type="checkbox" value="美女" />美女

    <input type="checkbox" value="美男" />美男

    <input type="checkbox" value="大爷" />大爷

    <input type="checkbox" value="大妈" />大妈

    <br>

    <input type="radio" value="男" />男

    <input type="radio" value="女" />女

    <br>

    <select id="zhiwei" size="5" multiple="multiple">

       <option>PHP开发工程师</option>

       <option>数据库管理员</option>

       <option>系统分析师</option>

       <option>保安</option>

    </select>


    <select id="xueli">


       <option>大专</option>

       <option>中专</option>

       <option>小学</option>


    </select>

    </form>

    <div style="clear:both;">


    <input id="btn0" type="button" value="利用jquery对象实现 修改表单中可修改的文本域的值  $('input[type=text]:enabled')" /><br>

    <input id="btn1" type="button" value="利用jquery对象实现 修改表单中不可修改的文本域的值  $('input[type=text]:disabled')" /><br>

    <input id="btn2" type="button" value="利用jquery对象实现 获取选中的复选框的个数 $('input[type=checkbox]:checked')" /><br>

    <input id="btn3" type="button" value="利用jquery对象实现 获取选中的下拉菜单的内容  $('select option:selected')" /><br>

    </div>

    </body>

    </html>

    ---------------------
    作者:honey_tao
    来源:CSDN
    原文:https://blog.csdn.net/honey_th/article/details/7404273
    版权声明:本文为博主原创文章,转载请附上博文链接!

  • 相关阅读:
    动物细胞结构模型 | animal cell structure
    课程学习
    (基因功能 & 基因表达调控)研究方案
    PCR | RT-PCR 的原理及应用
    ggplot的boxplot添加显著性 | Add P-values and Significance Levels to ggplots | 方差分析
    常见的医学基因筛查检测 | genetic testing | 相癌症早筛 | 液体活检
    (转载)RNA表观遗传学开创者何川
    生物信息基本工具和数据库
    女士品茶 | The Lady Tasting Tea | 统计学史
    R Shiny app | 交互式网页开发
  • 原文地址:https://www.cnblogs.com/Jeely/p/11056807.html
Copyright © 2011-2022 走看看