• jQuery基础 处理多个选择结果(each迭代方法)


    jQuery提供.each()方法来对选中的结果进行循环处理,而且在每次执行函数时,都会给函数传递匹配元素在选中结果里所处位置的数字值作为参数(从零开始的整形变量)。返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。

    例子一

    <ul>
    
      <li>第一列</li>
    
      <li>第二列</li>
    
      <li>第三列</li>
    
    </ul>
    
    <button>选中所有列</button>
    
    //使用下面的jQuery代码,点击按钮后,所有列将被选择,并且在每列后加上index

    $(document).ready(function() {

    $('button').click(function(){

       $('li').each(function(index){
    
          var str = "<b>"+index+"</b>";
    
          $("li:eq("+index+")").append(str);
    
       });
    
    });
    });
    //注意:index是从零开始的整形变量。

    例子二

    <ul>
    
    <li>第一列</li>
    
    <li>第二列</li>
    
    <li class="mark">第三列</li>
    
    <li class="mark">第四列</li>
    
    </ul>
    
    <button>选择列</button>
    
    //使用下面的jQuery代码,点击按钮后,class为“mark”的列将被选择

    $(document).ready(function() {

    $('button').click(function(){

       $('li').each(function(index){
    
          if ($(this).is(".mark")){
    
             this.style.color = 'blue';
    
          }
    
       });
    
    });
    });
    
    
    //如果我们只想选第一个class为"mark"的列,可以使用return false,停止循环
    

    $(document).ready(function() {

    $('button').click(function(){

       $('li').each(function(index){
    
          if ($(this).is(".mark")){
    
             this.style.color = 'blue';
    
             return false; //注意这个return
    
          }
    
       });
    

    });

    });

    注意:在上述例子里,我用到了$(this)this, 前者是jQuery对象,后者是DOM对象。jQuery对象具有is方法,但不具有style方法,同理,DOM对象具有style方法,但不具有is方法。

  • 相关阅读:
    技术面试问题汇总第005篇:猎豹移动反病毒工程师part5
    技术面试问题汇总第004篇:猎豹移动反病毒工程师part4
    Hexo安装和配置
    hexo从零开始到搭建完整 转
    window下phpstudy的nginx配置虚拟主机
    CentOS Linux搭建SVN服务器
    解决CentOS7关闭/开启防火墙出现Unit iptables.service failed to load: No such file or directory.
    numpy使用
    Linux学习15_CentOS6.5下netcat工具安装教程
    中国天气网七天天气
  • 原文地址:https://www.cnblogs.com/tweet/p/1667081.html
Copyright © 2020-2023  润新知