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

1. each() 예제 - li 각 요소의 텍스트로 경고창 띄우기
2. each() 정의
3. each() 구문
4. each() 예제 - 메뉴 실렉트 효과 (= ON효과)
5. each() 예제 - 모든 링크에 hz 파라미터 추가
6. each() 예제 - 동일 각 자식요소에 순번 붙이기
7. echo() 예제 - <input value=1>인 경우 class 속성값 얻기
8. 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

echo() 예제 - <input value=1>인 경우 class 속성값 얻기

 

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

<input type="text" value="1" class="boy">

<input type="text" value="1" class="boy">

<input type="text" value="0" class="girl">

<input type="text" value="0" class="girl">

 

<script>

$(document).ready(function () {

    $("input[value='1']").each(function () {

        var $this = $(this);

        alert($this.attr('class'));

    })

})

</script>

 

결과보기

세크티 님 (220128) https://sir.kr/qa/447324

each() 관련 주소

 

바위처럼 님 - each() 강의

https://youtu.be/IqZgcXYRNmw