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