• 11a
  • 22b
  • erhalten 33c
  • 44d
  • 55e
    • "/>
  • 11a
  • 22b
  • erhalten 33c
  • 44d
  • 55e
    • ">
    suchen

    Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung des Beispielcodes für jedes Traversal-Ereignis, jede Klasse und jede Schleife in jquery

    Detaillierte Erläuterung des Beispielcodes für jedes Traversal-Ereignis, jede Klasse und jede Schleife in jquery

    伊谢尔伦
    伊谢尔伦Original
    2017-07-19 14:36:231957Durchsuche

    Durchlaufen Sie li durch jeden, um den gesamten Inhalt von li zu erhalten 


    <!-- 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>

    Durchlaufen Sie li durch jeden durch $(this) Fügen Sie Ereignisse zu jedem Li hinzu 


    <!-- 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>

    Durchlaufen Sie alle Lis und fügen Sie Klassennamen zu allen Lis hinzu 


    <!-- 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 every() Schleifenelement == $(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>

    Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Beispielcodes für jedes Traversal-Ereignis, jede Klasse und jede Schleife in jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

    Stellungnahme：
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Vorheriger Artikel：Warum flackert die Ebene, wenn sich die Maus im Onmouseover-Ereignis in JavaScript bewegt?Nächster Artikel：Warum flackert die Ebene, wenn sich die Maus im Onmouseover-Ereignis in JavaScript bewegt?

    In Verbindung stehende Artikel

    Mehr sehen