首页 > 其他分享 >JQuery遍历

JQuery遍历

时间:2022-08-20 15:15:57浏览次数:58  
标签:JQuery 遍历 jq li callback each citys

JQuery遍历

1.js的遍历方式

  • for(初始化值;循环结束条件;步长)

HTML代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        /*
        遍历
            1、js的遍历方式
            for(初始值;循环结束条件;步长)
            2、jq的遍历方式
            1、jq对象.each(callback)
            2、$.each(object,[callback])
            3、for..of:
         */

        $(function () {
            //1、获取所有的ul下的li
            var citys = $("#city li");

            //2、遍历li
            for (var i = 0; i < citys.length; i++) {
                if("上海"==citys[i].innerHTML){
                    //break; //结束循环
                    continue; //结束本次循环。继续下次循环
                }

                //获取内容
                alert(i+":"+citys[i].innerHTML);
            }
        });

    </script>
</head>
<body>
<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
    <li>重庆</li>
</ul>
</body>
</html>

2.jq的遍历方式

  1. jq对象.eqch(callback)
  2. $.each(object,[callback])
  3. for..or

HTML代码

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
          /*
          遍历
              1、js的遍历方式
              for(初始值;循环结束条件;步长)
              2、jq的遍历方式
              1、jq对象.each(callback)
              2、$.each(object,[callback])
              3、for..of:
           */
  
          $(function () {
              //1、获取所有的ul下的li
              var citys = $("#city li");
  //jq对象.each(callback)
              citys.each(function (index,element) {
                  //获取li对象 第一种方式  this
                  // alert(this.innerHTML);
                  //alert($(this).html());
  
                  //获取li对象 第二种方式  在回调函数中定义函数:index(索引)  element(元素对象)
                  //alert(index+":"+element.innerHTML)
                  //alert(index+":"+$(element).html())
  
                  //判断如果是上海,则结束循环
                  if ("上海" == $(element).html()){
                      //如果当前function返回为false,则结束循环(break)
                      //如果返回为true,则结束本次循环,继续下次循环(continue)
                      return false;
                  }
  
                  alert(index+":"+$(element).html())
              });
          });
  
      </script>
</head>
<body>
<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
    <li>重庆</li>
</ul>
</body>
</html>

标签:JQuery,遍历,jq,li,callback,each,citys
From: https://www.cnblogs.com/aimz01/p/16607726.html

相关文章

  • AJAX实现JQuery
    AJAX实现JQuery实现方式ajax()语法$.ajax(url,[settings])记着导入jquery<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>1-原生js......
  • JQuery案例和插件机制
    案例—广告显示和隐藏需求:1、当页面加载完,3秒后。自动显示广告2、广告显示5秒后,自动消失分析:1、使用定时器来完成,setTimeout(执行一次定时器)2、分析......
  • Jquery插件机制
    插件:增强JQuery的功能实现方式:$.fn.extend(object)增强通过JQuery获取的对象的功能$("#id")$.extend(object)增强JQuery对象自身的功能$/JQuery<!DOCTY......
  • JQuery案例_广告显示和隐藏&JQuery案例_抽奖
    JQuery案例_广告显示和隐藏需求:当页面加载完,3秒后自动显示广告广告显示5秒后,自动消失分析:使用定时器来完成。setTimeout(执行一次定时器)分析发现JQuery的显示......
  • JQuery_案例
    JQuery_案例隔行换色HTML代码<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><scriptsrc="../js/jquery-3.3.1......
  • JQuery插件机制
    JQuery插件机制插件:增强JQuery的功能 1.实现方式: 1.$.fn.extend(object)  (对象) 增强通过JQuery获取的对象的功能 $("#id") 2......
  • JQuery广告显示和隐藏案例和JQuery抽奖案例
    JQuery广告显示和隐藏案例需求:1.当页面加载完,3秒后。自动显示广告2.广告显示5秒后,自动消失。分析:1.使用定时器来完成。setTimeout(执行一次定时器)2.分析......
  • JQuery事件绑定
    事件绑定jquery标准的绑方式jq对象.事件方法(回调函数);<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><scripttype="text/......
  • JQuery事件绑定
    事件绑定1.jquery标准的绑定方式jq对象.事件方法(回调函数);注:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。表单对象.submit();//让表单提交<......
  • JQuery事件绑定
    JQuery事件绑定标准方式JQuery对象.事件方法(回调函数);注:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。表单对象.submit();//让表单提交<!DOCTYPEht......