• 11a
  • 22b
  • のすべての内容を取得できます。 33c
  • 44d
  • 55e
  • "/>
  • 11a
  • 22b
  • のすべての内容を取得できます。 33c
  • 44d
  • 55e
  • ">

    ホームページ >ウェブフロントエンド >jsチュートリアル >jqueryの各トラバーサルイベント、クラス、ループのサンプルコードを詳しく解説

    jqueryの各トラバーサルイベント、クラス、ループのサンプルコードを詳しく解説

    伊谢尔伦
    伊谢尔伦オリジナル
    2017-07-19 14:36:231960ブラウズ

    各 li をトラバースして、すべての li の内容を取得します


    <!-- 1种 -->
      <ul class="one">
        <li>11a</li>
        <li>22b</li>
        <li>33c</li>
        <li>44d</li>
        <li>55e</li>
      </ul>
      <button>输出每个li值</button>
    <script>
      // 1种 通过each遍历li 可以获得所有li的内容
      $("button").click(function(){ 
        $(".one > li").each(function(){
          // 打印出所有li的内容
          console.log($(this).text());
        })
      });
    </script>

    li をそれぞれトラバースし、$(this) を通じて各 li にイベントを追加します


    <!-- 2种 -->
      <ul class="two">
        <li>2222</li>
        <li>22b</li>
        <li>3333</li>
        <li>44d</li>
        <li>5555</li>
      </ul>
    <script>
      // 2种 通过each遍历li 通过$(this)给每个li加事件
      $(&#39;.two > li&#39;).each(function(index) {
        console.log(index +":" + $(this).text());
        // 给每个li加click 点那个就变颜色
        $(this).click(function(){
          alert($(this).text());
          $(this).css("background","#fe4365");
        });
      });
    </script>

    すべての li をトラバース すべてに追加li class クラス名


    <!-- 4种 -->
      <ul class="ctn3">
        <li>Eat</li>
        <li>Sleep</li>
        <li>3种</li>
      </ul>
      <span>点击3</span>
    <script>
      // 4种 遍历所有li 给所有li添加 class类名
      $(&#39;span&#39;).click(function(){
        $(&#39;.ctn3 > li&#39;).each(function(){
          $(this).toggleClass(&#39;example&#39;);
        })
      });
    </script>

    in each() ループ要素 == $(this)


    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>each练习2</title>
      <style>
        p {
          width: 40px;
          height: 40px;
          margin: 5px;
          float: left;
          border: 2px blue solid;
          text-align: center;
        }
        span {
          width: 40px;
          height: 40px;
          color: red;
        }
      </style>
    </head>
    <body>
      <p></p>
      <p></p>
      <p></p>
      <p id="stop">Stop here</p>
      <p></p>
      <p></p>
      <button>Change colors</button>
      <span></span>
    </body>
    <script src="jquery-1.11.1.min.js"></script>
    <script >
       // 在each()循环里 element == $(this)
      $(&#39;button&#39;).click(function(){
        $(&#39;p&#39;).each(function(index,element){
          //element == this;
          $(element).css("background","yellow");
    
          if( $(this).is("#stop")){
            $(&#39;span&#39;).text("index :" + index);
            return false;
          }
        })
      })
    </script>
    </html>

    以上がjqueryの各トラバーサルイベント、クラス、ループのサンプルコードを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

    声明:
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。