Compréhension approfondie de chaque utilisation dans jquery-js tutoriel-php.cn

Compréhension approfondie de chaque utilisation dans jquery

高洛峰

Libérer： 2016-12-29 11:10:50

original

1490 Les gens l'ont consulté

1 façon de parcourir li à travers chacun pour obtenir tout le contenu de 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>

Copier après la connexion

2 façons de parcourir li à travers chacun et d'ajouter des événements à chaque li via $(this)

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

Copier après la connexion

4 façons de parcourir tous les li Ajouter le nom de la classe à tous les li

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

Copier après la connexion

5 façons Dans chaque élément de boucle() == $(this)

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>each练习2</title>
  <style>
    div {
      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>
  <div></div>
  <div></div>
  <div></div>
  <div id="stop">Stop here</div>
  <div></div>
  <div></div>
  <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;div&#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>

Copier après la connexion

Ce qui précède est le contenu complet de l'article, j'espère que le contenu de cet article pourra apporter de l'aide aux études ou au travail de chacun, et j'espère également soutenir le site Web PHP chinois !

Pour une compréhension plus approfondie de chaque utilisation dans jquery, veuillez faire attention au site Web PHP chinois !