집 >웹 프론트엔드 >JS 튜토리얼 >Jquery의 각 사용법에 대한 심층적인 이해

Jquery의 각 사용법에 대한 심층적인 이해

高洛峰원래의: 2016-12-29 11:10:501471검색

li의 모든 내용을 얻기 위해 각각을 통해 li를 순회하는 1가지 방법

<!-- 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가지 방법

<!-- 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를 순회하는 4가지 방법 모든 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>

5가지 방법 각() 루프 요소에서 == $(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>

위는 다음과 같습니다. 전체 기사 내용, 이 기사의 내용이 모든 사람의 학습이나 업무에 도움이 되기를 바랍니다. 또한 PHP 중국어 웹사이트를 지원하고 싶습니다!

jquery의 각 사용법을 더 자세히 이해하려면 PHP 중국어 웹사이트를 주목하세요!

성명：

이전 기사：jquery는 각 메서드를 사용하여 json 형식 데이터 인스턴스를 탐색합니다.다음 기사：jquery는 각 메서드를 사용하여 json 형식 데이터 인스턴스를 탐색합니다.

Jquery의 각 사용법에 대한 심층적인 이해

관련 기사