精华内容
参与话题
问答
  • each遍历

    2019-05-13 13:50:46
    jQuery中$.each()方法的使用 $.each()是对数组,json和dom结构等的遍历,说一下他的使用方法吧。 1、遍历一维数组 var arr1=['aa','bb','cc','dd']; $.each(arr1,function(i,val){ //两个参数,第一个参数表示...
    jQuery中$.each()方法的使用
    $.each()是对数组,json和dom结构等的遍历,说一下他的使用方法吧。
    
    1、遍历一维数组
    
     var arr1=['aa','bb','cc','dd'];
     $.each(arr1,function(i,val){ //两个参数,第一个参数表示遍历的数组的下标,第二个参数表示下标对应的值
     console.log(i+'```````'+val);
    输出的结果为:
    
    0```````aa
    1```````bb
     2```````cc
    3```````dd
    2、遍历二维数组
    
    var arr2=[['aaa','bbb'],['ccc','ddd'],['eee','fff']];
    $.each(arr2,function(i,item){ //两个参数,第一个参数表示下标,第二个参数表示一维数组中的每一个数组
     console.log(i+'````'+item);
    输出的结果为:
    
    0````aaa,bbb
    1````ccc,ddd
    2````eee,fff
    此时可以对输出的一维数组进行遍历
    
    $.each(item,function(i,val){  //遍历二维数组
              console.log(i+'`````'+val);
      })
    输出的结果为:
    
    0````aaa,bbb
        0`````aaa
        1`````bbb
    1````ccc,ddd
        0`````ccc
        1`````ddd
    2````eee,fff
        0`````eee
        1`````fff
    3、处理json
    
    var json1={key1:'a',key2:'b',key3:'c'};
     $.each(json1,function(key,value){  //遍历键值对
                console.log(key+'````'+value);
      })
    输出的结果为:
    
    key1````a
    key2````b
    key3````c
    4、当二位数组中有json对象时
    
    复制代码
    var arr3=[{name:'n1',age:18},{name:'n2',age:20},{name:'n3',age:22}];
            $.each(arr3,function(i,val){
                console.log(i+'`````'+val);   
        //输出
        /* 0`````[object Object] 1`````[object Object] i2`````[object Object]*/
                console.log(val.name); //获取每一个json里面的name值
                console.log(val["name"]);
                $.each(val,function(key,val2){
                    console.log(key+'```'+val2);
                })
            });
    复制代码
    5、处理dom元素
    
    <input name="aaa" type="hidden" value="111" />
    <input name="bbb" type="hidden" value="222" />
    <input name="ccc" type="hidden" value="333" />
    <input name="ddd" type="hidden" value="444"/>
    复制代码
    $.each($('input:hidden'),function(i,val){
                console.log(i+'````'+val);
                /*0````[object HTMLInputElement]
                1````[object HTMLInputElement]
                2````[object HTMLInputElement]
                3````[object HTMLInputElement]*/
                console.log(val.name+'`````'+val.value);
               /* aaa`````111
               bbb`````222
                ccc`````333
               ddd`````444*/
            })
    复制代码
    以上就是$.each()最基本的使用了,
    
    jQuery中还有另外一种写法来遍历元素
    
    $("input:hidden").each(function(i,val){  //第一个参数表示索引下标,第二个参数表示当前索引元素
        alert(i);
        alert(val.name);
        alert(val.value);       
    });
     
    
     
    
    
    
    作者:freeah
    出处:http://www.cnblogs.com/zhaixr/

     

    展开全文
  • 浅谈jquery中的each方法$.each、this.each、$.fn.each

    jquery.each 方法

    方法一

    ?
    1
    2
    3
    4
    5
    6
    $("img").each(function(i,elem){
     // i 下标 从零开始,
     // elem == this
     // $(elem).toggleClass("example");
     $(this).toggleClass("example");
    });

    方法二

    ?
    1
    2
    3
    $.each([1,2,3,4],function(){
      //$(this)==数组中的每一个数组(如果数组是对象,就是对象)
    });

    方法三

    应有场景有点不一样

    ?
    1
    2
    3
    this.each(function(){
     
    })

    扩展jQuery对象方法

    应该是 

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    jQuery.fn.Fun=function(){
      //this==$("img") 和下面的调用方法相结合,如果是其他对象就是其他对象
      this.each(function(){
      
      $(this)==$("img")[0],
      //$(this)==$("img")[1],
     // .......
     
      })
      
     
    }
    调用
    $("img").Fun();
    展开全文
  • th:each 循环迭代 循环基本用法 获取迭代状态 条件判断 th:if th:unless th:switch th:each 循环迭代 循环基本用法 1、对于信息页面,数据格式是一样时,页面通常都是循环迭代它们,写过 JSP 的 JSTL 的就...

    目录

    th:each 循环迭代

    th:each  获取迭代状态

    th:if 条件判断 true

    th:unless 条件判断 false

    th:switch case 条件匹配


    th:each 循环迭代

    1、对于信息页面,数据格式是一样时,页面通常都是循环迭代它们,写过 JSP 的 JSTL 的就知道,JSTL 有一个 <c:foreach>,同理 Thymeleaf 也有一个 th:each。作用都是一样的,都是用于遍历数组、List、Set、Map 等数据。

    2、JSTL th:each 遍历格式如下:

    <c:foreach items ="${lis}" var = "li " begin="2" end ="12">
         ${li}
    </c:foreach>
         Thymeleaf 遍历格式如下:
    <tr th:each="user : ${userList}">
          <td th:text="${user.name}">xxx</td>
    </tr>

    3、Thymeleaf  th:each 遍历格式如下:

    <body>
    <!--后台控制器输出数据:model.addAttribute("userList", User.getUsers());-->
    <!--public static List<User> getUsers(),即数据格式为常见的:List<User>-->
    <table border="1">
        <thead>
        <tr>
            <th>工号</th>
            <th>姓名</th>
            <th>生日</th>
            <th>是否已婚</th>
            <th>工资</th>
        </tr>
        </thead>
        <tbody>
        <!-- 遍历集合,如果被遍历的变量 userList 为 null 或者不存在,则不会进行遍历,也不报错-->
        <tr th:each="user : ${userList}">
            <!-- 将用户的主键 uId 存在在 name 属性中-->
            <td th:text="${user.uId}" th:name="${user.uId}"></td>
            <td th:text="${user.uName}"></td>
            <!-- 使用dates对象格式化日期-->
            <td th:text="${#dates.format(user.birthday, 'yyyy-MM-dd HH:mm')}"></td>
            <!-- 三运运算判断是否已婚-->
            <td th:text="${user.isMarry}?'是':'否'"></td>
            <td th:text="${user.price}"></td>
        </tr>
        </tbody>
    </table>
    </body>

    1)th:each="user : ${userList},意味着对于 ${userList} 结果中的每个元素,循环迭代当前模板⽚段,并使⽤名为”user“的变量作为当前迭代元素来填充模版数据。

    2)如果被遍历的变量为 null,或者不存在,则直接不会遍历。

    3)th:each="user : ${userList} 作用域为自己的整个标签内,包括自己,如上所示为 <tr>。

    4)级联获取属性值<td th:text="${user.department.depName}"></td>,假设 User 中关联了 Department 对象.

    4、如下所示为遍历下拉框的代码,因为 th:each 的作用域包括自己,所以遍历与取值都在同一个 <option> 标签中:

    <form class="navbar-form navbar-left" role="search">
        <select class="form-control" style="width: 200px;font-size: 16px"
                id="stationSelect">
            <option>全区</option>
    
    <!--后台会传值:model.addAttribute("stationList", stationList); 下拉框所有选项的值-->
    <!--后台会传值:model.addAttribute("stationName", stationName); 用户当前选中的下拉框的值-->
    
            <option th:each="station : ${stationList}" th:text="${station.name}" th:selected="${stationName} eq ${station.name}">横岗</option>
        </select>
    </form>
    

    被迭代变量的值类型

    1、java.util.List 类型不是可以在 Thymeleaf 中使⽤迭代的唯⼀值类型,下⾯这些类型的对象都可以通过 th:each 进⾏迭代的:

    1)任何实现 java.util.Iterable 接⼝的对象,其值将被迭代器返回,⽽不需要在内存中缓存所有值。
    2)任何实现 java.util.Enumeration 接⼝的对象。
    3)任何实现 java.util.Map 接⼝的对象, 迭代映射时,iter 变量将是 java.util.Map.Entry 类。
    4)任何数组。
    5)任何其将被视为包含对象本身的单值列表。

    th:each  获取迭代状态

    1、迭代过程中,经常会使用到它的一些迭代状态,如:当前迭代的索引,迭代变量中的元素的总数,当前迭代的是奇数还是偶数,当前是否是第一个元素,当前是否是最后一个元素 等等。

    2、在 JSP 的 JSTL 中是 <c:foreach items="${list}" var ="li" varStatus="status"> 里面的 status 属性。

    3、使⽤ th:each 时,Thymeleaf 提供了⼀种⽤于跟踪迭代状态的机制:状态变量。状态变量在每个 th:each 属性中定义,并包含以下数据:

    1)index 属性:当前迭代索引,从0开始
    2)count 属性:当前的迭代计数,从1开始
    3)size 属性:迭代变量中元素的总量
    4)current 属性:每次迭代的 iter 变量,即当前遍历到的元素
    5)even/odd 布尔属性:当前的迭代是偶数还是奇数。
    6)first 布尔属性:当前的迭代是否是第⼀个迭代
    7)last 布尔属性:当前的迭代是否是最后⼀个迭代。

    <body>
    <!--后台控制器输出数据:model.addAttribute("userList", User.getUsers());-->
    <!--public static List<User> getUsers(),即数据格式为常见的:List<User>-->
    <table border="1">
        <thead>
        <tr>
            <th>序号</th>
            <th>工号</th>
            <th>姓名</th>
            <th>生日</th>
            <th>是否已婚</th>
            <th>工资</th>
        </tr>
        </thead>
        <tbody>
        <!-- 遍历集合,如果被遍历的变量 userList 为 null 或者不存在,则不会进行遍历,也不报错-->
        <!-- 设置状态变量 loopStatus,逗号分隔,当为奇数行时,设置一个 css2 样式-->
        <tr th:each="user,loopStatus: ${userList}" th:class="${loopStatus.odd}?'css2'">
            <!-- 显示当前的行序号-->
            <td th:text="${loopStatus.count}"></td>
            <!-- 将用户的主键 uId 存在在 name 属性中-->
            <td th:text="${user.uId}" th:name="${user.uId}"></td>
            <td th:text="${user.uName}"></td>
            <!-- 使用dates对象格式化日期-->
            <td th:text="${#dates.format(user.birthday, 'yyyy-MM-dd HH:mm')}"></td>
            <!-- 三运运算判断是否已婚-->
            <td th:text="${user.isMarry}?'是':'否'"></td>
            <td th:text="${user.price}"></td>
        </tr>
        </tbody>
    </table>

    4、迭代状态变量(本示例中的 loopStatus )在 th:each 属性中通过在变量 user 之后直接写其名称来定义,⽤逗号分隔。 与 iter 变量⼀样,状态变量的作⽤范围也是 th:each 属性的标签定义的代码⽚段中。

    5、如果没有显式地设置状态变量,则 Thymeleaf 将始终创建⼀个默认的迭代变量,该状态迭代变量名称为:迭代变量+“Stat”。

        <tbody>
        <!-- 遍历集合,如果被遍历的变量 userList 为 null 或者不存在,则不会进行遍历,也不报错-->
        <!-- 没有显示设置状态变量时,Thymeleaf 默认创建一个 userStat 状态变量,直接使用即可-->
        <tr th:each="user:${userList}" th:class="${userStat.odd}?'css2'">
            <!-- 显示当前的行序号-->
            <td th:text="${userStat.count}"></td>
            <!-- 将用户的主键 uId 存在在 name 属性中-->
            <td th:text="${user.uId}" th:name="${user.uId}"></td>
            <td th:text="${user.uName}"></td>
            <!-- 使用dates对象格式化日期-->
            <td th:text="${#dates.format(user.birthday, 'yyyy-MM-dd HH:mm')}"></td>
            <!-- 三运运算判断是否已婚-->
            <td th:text="${user.isMarry}?'是':'否'"></td>
            <td th:text="${user.price}"></td>
        </tr>
        </tbody>

    th:if 条件判断 true

    1、很多时候只有在满⾜某个条件时,才将⼀个模板⽚段显示在结果中,否则不进行显示。比如只有当用户有订单时,才为它显示订单链接,否则不显示。th:if 属性用于满足这个需求:

    <body>
    <!--if属性结果为 true,模板会进行显示-->
    <p th:if="true">th:if="true"</p>
    <!--if属性结果为 false,模板不会进行显示-->
    <p th:if="false">th:if="false"</p>
    
    <!--后台控制器传出数据:model.addAttribute("isMarry", true);-->
    <p th:if="${isMarry}">已婚</p>
    </body>

    2、th:if 属性不仅只以布尔值作为判断条件,它将按照如下规则判定指定的表达式结果为 true:

    1)如果表达式结果为布尔值,则为 true 或者 false
    2)如果表达式的值为 null,th:if 将判定此表达式为 false
    3)如果值是数字,为 0 时,判断为 false;不为零时,判定为 true
    4)如果 value 是 String,值为 “false”、“off”、“no” 时,判定为 false,否则判断为 true,字符串为空时,也判断为 true
    5)如果值不是布尔值,数字,字符或字符串的其它对象,只要不为 null,则判断为 true

    <body>
    <!--表达式的结果为布尔类型时,if 直接以它为结果-->
    <p th:if="true">th:if="true"</p>
    <!--当表达式结果为null时,则if判定为false-->
    <p th:if="null">th:if="null"</p>
    <!--表达式为数字时,不为0,if判定为true,为0,时,if判定为false-->
    <p th:if="11">th:if="11"</p>
    <p th:if="0">th:if="0"</p>
    
    <!--表达式结果为字符串时,如果为 true,则if判定为true;值为 false,则if判定为false-->
    <!--结果为 off、no 等特殊字符串时,if 判定为false-->
    <p th:if="'true'">th:if="'true'"</p>
    <p th:if="'false'">th:if="'false'"</p>
    <p th:if="'off'">th:if="'off'"</p>
    <p th:if="'no'">th:if="'no'"</p>
    <!--表达式结果字符串不为false,off,no时,if判定为true-->
    <p th:if="'Love China'">th:if="'Love China'"</p>
    
    <!--后台传输:model.addAttribute("userList", User.getUsers());-->
    <!--只要 userList 不等于null,则if判定为true,否则为false-->
    <p th:if="${userList}">th:if="${userList}"</p>
    
    <!--后台传输:model.addAttribute("name", "");-->
    <!--字符串为空时,if判定为 true-->
    <p th:if="${name}eq''">name 等于空</p>
    <p th:if="${name}">th:if="${name}"</p>
    </body>

    th:unless 条件判断 false

    1、th:unless 是 th:if 的反向属性,它们判断的规则一致,只是 if 当结果为 true 时进行显示,unless 当结果为 false 进行显示。

    <body>
    <!--unless与if判定规则一致,但是显示条件相反,unless当结果为false时才进行显示-->
    <p th:unless="false">th:unless="false"</p>
    <p th:unless="true">th:unless="true"</p>
    
    <!--后台传输:model.addAttribute("isMarry", true);-->
    <p th:if="${isMarry}">已婚1</p>
    <p th:unless="!${isMarry}">已婚2</p>
    </body>

    th:switch case 条件匹配

    1、th:switch / th:case 与 Java 中的 switch 语句等效,有条件地显示匹配的内容。

    2、只要其中⼀个 th:case 的值为 true,则同⼀个 switch 语句中的其他 th:case 属性都将被视为 false。当有多个 case 的值为 true 时,则只取第一个。

    3、switch 语句的 default 选项指定为 th:case =“*”,即当没有 case 的值为 true 时,将显示default 的内容,如果有多个 default ,则只取第一个。

    <body>
    <!--数字类型,匹配其中第一个 case 后,其它的 case 都将视为 false-->
    <div th:switch="1">
        <p th:case="0">管理员</p>
        <p th:case="1">操作员</p>
        <p th:case="*">未知用户</p>
    </div>
    
    <!--数字类型:当没有 case 匹配时,取默认值,当有多个匹配,只取第一个-->
    <div th:switch="-1">
        <p th:case="0">管理员</p>
        <p th:case="*">操作员</p>
        <p th:case="*">未知用户</p>
    </div>
    
    <!--布尔类型,多个case满足时,只取第一个-->
    <div th:switch="true">
        <p th:case="true">已婚</p>
        <p th:case="true">已成年</p>
        <p th:case="false">未婚</p>
    </div>
    
    <!--字符串类型-->
    <div th:switch="'For China'">
        <p th:case="'For USA'">美国</p>
        <p th:case="'For UK'">英国</p>
        <p th:case="'For China'">中国</p>
        <p th:case="*">未知国籍</p>
    </div>
    </body>

     

    展开全文
  • each循环

    2018-08-30 16:13:12
    一、each的两种写法 (1)遍历元素节点  $(node).each(function(index,element) {  console.log(index);  console.log(element);  })  (2)遍历数组,数据格式  $.e...

    一、each的两种写法

    (1)遍历元素节点
             $(node).each(function(index,element) {
                         console.log(index);
                         console.log(element);
              })

     (2)遍历数组,数据格式
               $.each(arry,function(iindex,element) {
                         console.log(index);
                         console.log(element);
               })

     二、each的用法

    (1)遍历数组
                  遍历一维数组的形式就用写法2;
                  遍历二维数组:就先遍历第一层,然后在对获得的element进行第二次遍历。就可以获取每个元素。 

    var arr2=[['aaa','bbb'],['ccc','ddd'],['eee','fff']];
    $.each(arr2,function(index,element){ 
        console.log(index+'````'+element);
        $.each(item,function(index,element){  //遍历二维数组
        console.log(index+'`````'+element);
      })

    (2)遍历json数组

    var jsonNum={key1:'a',key2:'b',key3:'c'};
     $.each(jsonNum,function(key,value){  //遍历其键值对
                console.log(key+'````'+value);
      })

    (3)遍历DOM元素

               方法一使用就好了,

                也可以采用方法二(其中参数arry,换成对应的$(node)即可)。

    展开全文
  • each 和 forEach 和{{each}}

    千次阅读 2018-06-13 16:32:46
    each : 是jquery中的一个方法,要想使用必须引用jquery,一般用来遍历伪数组实例对象 $.each('div',function(){}) $('div').each(function(){}) 伪数组是对象,对象中的prototype(Object.prototype)并没有...
  • router.beforeEach((to, from, next) => { console.log('before each invoked'); if (to.fullPath === '/app') { // next('/login')//不仅可以写字符串还可以是一个对象 next({path: '/login', replace}) .....
  • update value on:each iteration,each occurrunce,once; 名词解释: Sequential:为按顺序执行, random:随机执行; unique:唯一; each iteration:每迭代一次取一次值; each occurru...
  • Jquery的 each的使用 $.each()

    千次阅读 2018-08-21 18:10:05
    下面提一下each的几种常用的用法 1. each处理一维数组 var arr1 = [ "aaa", "bbb", "ccc" ]; $.each(arr1, function(i,val){ alert(i); alert(val); }); alert(i)将输出0...
  • vue 路由拦截器 beforeEach和afterEach

    千次阅读 2018-07-07 10:43:59
    beforeEach函数 router.beforeEach((to, from, next) =&amp;gt; { // do something; /* must call `next` */ next(); }); to:router即将进入的路由对象 from:当前即将离开的路由 n...
  • $().each和$.each的区别

    千次阅读 2018-09-02 10:04:11
    1.$(selector).each(function(index,element)) 2.$.each(dataresource,function(index,element)) 接下来就对这两个函数做深入的探讨: 1.$(selector).each(function(index,element)) 作用:在dom处理上面用的较...
  • each的用法

    千次阅读 2017-11-30 13:47:28
    1.数组中的each 复制代码 var arr = [ "one", "two", "three", "four"]; $.each(arr, function(){ alert(this); }); //上面这个each输出的结果分别为:one,two,three,four var arr1 = [[1, 4, 3]
  • each 、forEach 、$.each each 是 art-template 的模板语法,专属的 {{each 数组}} <li>{{ $value }}</li> {{/each}} 这是 art-template 模板引擎支持的语法,只能在模板字符串中使用 $.each(数组,...
  • 这句话什么意思啊 each[0]是什么意思,each不是一个变量 each[0]表达什么意思
  • query each循环遍历完再执行的方法 因为each是异步的 所以要加计数器. var eachcount=0; $(“.emptytip”).each(function(){ eachcount++ console.log(eachcount); if(eachcount&amp;gt;=$(“....
  • VBA For Each循环

    千次阅读 2019-05-20 09:40:52
    VBA For Each循环 作者: MrHello Java技术QQ群:227270512 / Linux QQ群:479429477 For Each循环用于为数组或集合中的每个元素执行语句或一组语句。For Each循环与For循环类似; 然而,For Each循环是为数组或组...
  • 首先是官方文档对beforeEach前置导航守卫的一些说明: 用法: router.beforeEach((to, from, next) => { // ... }) 每个守卫方法接收三个参数: to: Route: 即将要进入的目标路由对象 from: Route: ...
  • 在路由跳转的时候,我们需要一些权限判断或者其他操作。这个时候就需要使用路由的钩子函数。 定义:路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数。...Vue.afterEach...
  • list_for_each与list_for_each_entry

    千次阅读 2015-05-25 18:42:57
    1.list_for_each和list_for_each_entry都是遍历链表的两个宏,本质上都是for循环。 2.他们做的事情本质上都一样,A.获取链表头,B.判断链表项是不是链表头,C.指向链表的下一项。 3.他们的区别:list_for_each遍历...
  • $(selector).each()和$.each()的区别

    千次阅读 2016-01-11 18:03:15
    $.each()和$(selector).each()的区别
  • for-each 循环

    万次阅读 2018-12-07 14:35:23
    for-each循环是Java相比C语言中的for循环拓展而来的一种新的遍历数组的循环方式,其相对于一般的for循环更方便,而且更易查找数组内的变量,他与我们常见的for循环不同的是,for循环是通过循环控制变量,访问数组中...
  • 在jquery中,遍历对象和数组,经常会用到().each和().each和.each(),两个方法。().each在dom处理上面用的较多。如果页面有多个input标签类型为checkbox,对于这时用().each 在dom处理上面用的较多。如果页面有多个...
  • jQuery的each方法

    2019-06-27 17:30:47
    开发工具与关键技术:Visual Studio / each方法的应用 作者:郑名方 撰写时间:2019年6月 25日 为什么说jQuery中有个重要的方法.each(),因为大部分jQuery方法在内部都会调用.each,其中主要的原因就是jQuery的实例...
  • jquery的$().each和$.each的区别

    千次阅读 2018-11-26 16:16:37
    $(selector).each(function(index,element)) 这个函数和之前项目里面用到的遍历数据的函数不是同一个呀(项目里面用到的函 数:$.each(dataresource,function(index,element))),于是,就好好研究了下,果然在JS...
  • jquery的$().each,$.each 遍历对象和数组

    万次阅读 2018-05-08 16:41:52
    原文链接 http://www.frontopen.com/1394.html在jquery中,遍历对象和数组,经常会用到$().each和$.each(),两个方法。...如果页面有多个input标签类型为checkbox,对于这时用$().each来处理多个checkbo...
  • 【1】$().each(function(){})对于这个方法,在dom处理上面用的较多。如果页面有多个input标签类型为checkbox,对于这时用$().each来处理多个checkbook,例如:$("input[name='ch']").each(function(index)...
  • 在jquery中,遍历对象和数组,经常会用到$().each和$.each(),两个方法。 1. $().each 在dom处理上面用的较多。如果页面有多个 li 标签 ,对于这时用$().each来处理多个li,例如: $("li").each...
  • each_keyrequire "benchmark"h = Hash.new;n = 100000;for i in 1..n; h[i] = i.to_s;end;Benchmark.bm do |x|; x.report { s = ""; h.each_key do |key|; s end; }end;#
  • each循环数组

    2018-10-31 20:46:53
    &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&...each循环数组&amp;lt;/title&amp;gt; &amp;lt;scrip

空空如也

1 2 3 4 5 ... 20
收藏数 426,305
精华内容 170,522
关键字:

each