jQuery에서 특정 컨텍스트 내 요소 선택하기
이 강좌에서는 jQuery에서 특정 컨텍스트 내에서 요소를 선택하는 방법을 살펴보겠습니다. $('#MaidenName', form).val(); 표현식을 사용하여 원하는 폼 내에서 id가 MaidenName인 요소를 찾고 그 값을 가져오는 방법을 단계별로 알아보겠습니다.
1. HTML 구조 준비하기
먼저, 두 개의 폼과 각각 id가 MaidenName인 입력 필드를 포함하는 HTML 구조를 만듭니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Context Selector Example</title>
</head>
<body>
<form id="form1">
<label for="MaidenName1">Maiden Name Form 1:</label>
<input type="text" id="MaidenName" value="Smith">
</form>
<form id="form2">
<label for="MaidenName2">Maiden Name Form 2:</label>
<input type="text" id="MaidenName" value="Johnson">
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>
위 HTML은 id가 동일한 MaidenName을 가진 두 개의 입력 필드를 포함하는 두 개의 폼을 정의합니다.
2. jQuery로 컨텍스트 내 요소 선택하기
이제, 각 폼 내에서 id가 MaidenName인 요소의 값을 가져오는 jQuery 코드를 작성해보겠습니다.
2.1. script.js 파일 생성
HTML 파일과 동일한 디렉토리에 script.js 파일을 생성하고 다음 코드를 추가합니다.
$(document).ready(function() {
var form1 = $('#form1');
var form2 = $('#form2');
// form1 내에서 id가 MaidenName인 요소의 값을 가져옴
var maidenNameForm1 = $('#MaidenName', form1).val();
console.log('Form 1 Maiden Name:', maidenNameForm1); // 출력: Smith
// form2 내에서 id가 MaidenName인 요소의 값을 가져옴
var maidenNameForm2 = $('#MaidenName', form2).val();
console.log('Form 2 Maiden Name:', maidenNameForm2); // 출력: Johnson
// 전체 DOM에서 id가 MaidenName인 첫 번째 요소의 값을 가져옴
var maidenNameGlobal = $('#MaidenName').val();
console.log('Global Maiden Name:', maidenNameGlobal); // 출력: Smith
});
2.2. 코드 설명
위 코드에서는 jQuery를 사용하여 특정 폼 내에서 id가 MaidenName인 입력 필드의 값을 가져오는 방법을 보여줍니다.
var form1 = $('#form1');:id가form1인 폼을 선택합니다.var form2 = $('#form2');:id가form2인 폼을 선택합니다.var maidenNameForm1 = $('#MaidenName', form1).val();:form1내에서id가MaidenName인 입력 필드의 값을 가져옵니다.var maidenNameForm2 = $('#MaidenName', form2).val();:form2내에서id가MaidenName인 입력 필드의 값을 가져옵니다.var maidenNameGlobal = $('#MaidenName').val();: 전체 DOM에서id가MaidenName인 첫 번째 입력 필드의 값을 가져옵니다.
3. 결과 확인하기
브라우저에서 HTML 파일을 열고 콘솔을 확인합니다. 다음과 같은 결과를 볼 수 있습니다.
Form 1 Maiden Name: Smith
Form 2 Maiden Name: Johnson
Global Maiden Name: Smith
이렇게 하면 특정 폼 내에서
id가 MaidenName인 요소의 값을 정확히 가져올 수 있습니다.
4. 컨텍스트의 중요성
컨텍스트를 지정하여 요소를 선택하는 것은 특히 복잡한 페이지에서 중요합니다. 동일한 id를 가진 요소가 여러 개 있을 때, 컨텍스트를 사용하면 정확한 요소를 선택할 수 있습니다.
예제
만약 페이지에 여러 개의 폼이 있고, 각 폼 내에 동일한 id를 가진 입력 필드가 있다고 가정해보겠습니다. 이 경우, 컨텍스트를 지정하지 않으면 예상치 못한 값이 반환될 수 있습니다. 다음은 이러한 상황을 해결하는 방법입니다.
<form id="form1">
<input type="text" id="MaidenName" value="Smith">
</form>
<form id="form2">
<input type="text" id="MaidenName" value="Johnson">
</form>
<form id="form3">
<input type="text" id="MaidenName" value="Williams">
</form>
<script>
$(document).ready(function() {
var form1 = $('#form1');
var form2 = $('#form2');
var form3 = $('#form3');
// 각 폼 내에서 id가 MaidenName인 요소의 값을 가져옴
var maidenNameForm1 = $('#MaidenName', form1).val();
var maidenNameForm2 = $('#MaidenName', form2).val();
var maidenNameForm3 = $('#MaidenName', form3).val();
console.log('Form 1 Maiden Name:', maidenNameForm1); // 출력: Smith
console.log('Form 2 Maiden Name:', maidenNameForm2); // 출력: Johnson
console.log('Form 3 Maiden Name:', maidenNameForm3); // 출력: Williams
});
</script>
예제 설명
위 예제에서는 세 개의 폼이 있으며, 각 폼에는 id가 MaidenName인 입력 필드가 있습니다. 각 폼 내에서 정확한 값을 가져오기 위해 컨텍스트를 사용합니다.
결론
jQuery에서 특정 컨텍스트 내에서 요소를 선택하는 방법을 배웠습니다. 컨텍스트를 지정하면 동일한 id를 가진 여러 요소가 있을 때도 정확한 요소를 선택할 수 있습니다. 이 방법을 사용하면 복잡한 페이지에서도 안정적이고 예측 가능한 결과를 얻을 수 있습니다.
이 강좌를 통해 jQuery의 선택자와 컨텍스트 사용법을 이해하고 실무에 적용할 수 있기를 바랍니다.