• Q&A
  • 회원가입
  • 로그인

[Traversing] JQ - each() 메서드 ★★★ - 각 일치요소에 대해 함수 실행. (= 제이쿼리 반복문 = each메서드 = 이치메서드) ※ 메뉴 실렉트 효과 (= ON효과)

239  
목차
  1. each() 예제 - li 각 요소의 텍스트로 경고창 띄우기
  2. each() 정의
  3. each() 구문
  4. each() 예제 - 메뉴 실렉트 효과 (= ON효과)
  5. each() 예제 - 모든 링크에 hz 파라미터 추가
  6. each() 예제 - 동일 각 자식요소에 순번 붙이기
  7. each() 관련 주소

 

each() 예제 - li 각 요소의 텍스트로 경고창 띄우기


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("button").click(function(){

        $("li").each(function(){

            alert($(this).text())

        });

    });

});

</script>


<button>필수 학습 웹언어</button>


<ul>

  <li>HTML</li>

  <li>CSS</li>

  <li>JS</li>

</ul>


결과보기

 

each() 정의


일치하는 각 요소의 대해 반복 실행할 함수 지정.

 



1.
순환 일찍 끝내기 위해 return false 사용 가능.

 

2.

동일 유형의 요소가 많을 때 유용.

 

 

each() 구문


$(selector).each(function(index,element))

 


[매개변수] 

 

index

선택. 색인 위치.

※ for문의 $i 역할 비슷.

 

element

선택. 현재 요소.
※ "this" 선택자 사용 가능. (예: var val = $(this).val();)

 

PS. 

매개변수라 function(idx,emt) 처럼 명칭은 임의로 작성 가능.

 

each() 예제 - 메뉴 실렉트 효과 (= ON효과)

 

<style>

.on a {color:red}

</style>


<script src="http://code.jquery.com/jquery-latest.js"></script>


<ul>

    <li><a href="#">HTML</a></li>

    <li><a href="#">CSS</a></li>

    <li><a href="#">JS</a></li>

</ul>


<script>

$(document).ready(function () {

    $("li").each(function () {

        $(this).click(function () {

            $(this).addClass("on");              

            $(this).siblings().removeClass("on"); 

        });

    });

});

</script>

 

결과보기 

 

each() 예제 - 모든 링크에 hz 파라미터 추가

 

$('a').each(function(){

    var _href = $(this).attr('href');

    $(this).attr('href', _href + (_href.charAt(_href.length-1) == '/' ?  "? hz=<?php echo $var;?>" : "/?hz=<?php echo $var;?>");

});

 

welcome 님 (210105) https://sir.kr/qa/392766

 

each() 예제 - 동일 각 자식요소에 순번 붙이기

https://homzzang.com/b/css-345

 

each() 관련 주소

 

바위처럼 님 - each() 강의

https://youtu.be/IqZgcXYRNmw

 



찾아주셔서 감사합니다. Since 2012