JavaScript
jQuery 제이쿼리 .eq() 메서드 => 순수 JavaScript (바닐라JS) 방식으로 대체
JM_H
2023. 8. 12. 07:29
jQuery(제이쿼리)를 이용하여 요소들을 선택($(''))하고 해당 요소들을 반복하여 접근(.eq(i))하는 방법을
jQuery(제이쿼리) 없이 순수 자바스크립트 (바닐라JS)로 구현 해보도록 하자.
<!-- 예시 코드 -->
<!DOCTYPE html>
<html>
<head>
<title>Input Value Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<!-- 예시 요소 input 3개 -->
<input type="text" class="exampleClassName" value="Input 1">
<input type="text" class="exampleClassName" value="Input 2">
<input type="text" class="exampleClassName" value="Input 3">
<button id="getValuesBtn">버튼</button>
<script>
// 버튼 요소 id 속성으로 선택하여 변수에 담기
let getValuesBtn = document.getElementById('getValuesBtn');
getValuesBtn.addEventListener('click', function() { // 버튼 클릭을 감지 하는 이벤트
// jQuery(제이쿼리) 방식
let $inputElements = $('.exampleClassName');
for(var i = 0; i < $inputElements.length; i++) {
console.log('Input ' + i + ' Value(jQuery): ' + $inputElements.eq(i).val());
}
//-----------------------------------------------------------------------------
// 순수 자바스크립트 방식 (바닐라JS)
let inputElements = document.querySelectorAll('.exampleClassName');
Array.from(inputElements).forEach(function(inputElement, index) {
console.log('Input ' + index + ' Value(Vanilla JS): ' + inputElement.value);
});
});
</script>
</body>
</html>