[jquery,js]반복문+페이지 이동하기

 

• Item (명명된 매개변수) - 처리할 현재 요소(값)
• Index (선택적 매개변수) - 처리할 현재 요소의 인덱스(배열 위치)

jquery방식 반복문 : $.each(배열,function(index, item){})

js방식 반복문 : 배열.forEach(function(item, index){})

 

---

배열예제

let arr = [ {
		name : 'Naver',
		link : 'https://www.naver.com'
	}, {
		name : 'Daum',
		link : 'https://www.daum.net/'
	}, {
		name : 'Nate',
		link : 'https://www.nate.com'
	}, {
		name : 'Google',
		link : 'https://www.google.com/'
	}, {
		name : 'Microshoft',
		link : 'https://www.microsoft.com/'
	}, ];

🐲a tag

📍html예시

<a href="https://www.naver.com" >item.name</a>

 
📍script

See the Pen Untitled by 유레이나 (@zdixexqp-the-reactor) on CodePen.

💡&nbsp는 공백이다.
 

🐲radio

📍html예시

	<input type="radio" name="golink" value="https://www.naver.com" id="Naver" />
	<label for="Naver">Naver</label>
	<input type="radio" name="golink" value="https://www.daum.net" id="Daum" />
	<label for="Daum">Daum</label>

 
📍script

See the Pen Untitled by 유레이나 (@zdixexqp-the-reactor) on CodePen.

• $('input:checked').val();:
  ▪ input:checked : 현재 check된 input타입을 반환
  ▪ .val(): 선택된 요소의 value속성을 가져오는 jQuery 메서드. ∴item.link를 반환
• location.href = link;: 현재 페이지를 check된 링크로 변경

🐲select option

📍html 예시

<select>
	<option value="https://www.naver.com">Naver</option>
	<option value="https://www.daum.net">Daum</option>
	<option value="https://www.nate.com">Nate</option>
</select>

 
 
📍script
 

See the Pen Untitled by 유레이나 (@zdixexqp-the-reactor) on CodePen.

• $('select>option:selected').val();:
  ▪ select: <select> 요소를 선택.
  ▪ >: 자식 선택자.
  ▪ option: <select>의 자식 요소인 <option> 요소를 선택
  ▪ selected는 현재 선택된 옵션
  ▪ .val(): 선택된 요소의 value속성을 가져오는 jQuery 메서드. ∴item.link를 반환
• location.href = link;: 현재 페이지를 선택된 링크로 변경