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的遍历方式

jq对象.eqch(callback)
$.each(object,[callback])
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>