[JS] jquery로 클래스명이 동일한 여러 개의 태그 접근하기

 

사진과 같이 동일한 클래스에 대해서 다르게 css 속성을 해주고 싶을 때 사용하는 방법입니다.

 

예를 들어 위에 2개의 이미지가 있는데 2개 모두 동일한 태그로 생성된 뒤 데이터 값만 다르게 받았습니다.

<div>
	<div class="background">
    	이미지 A
    </div>
    <div class="background">
    	이미지 B
    </div>
</div>

 

 

만약 class="background" 라고 할때 $('.background').css("color", "red"); 하게 되면 2개의 이미지 모두 폰트가 빨간색으로 됩니다. 이 경우 저는 첫번째 이미지에만 빨간색 폰트로 하고 싶을 때 다음과 같은 방법을 사용하여 해당 태그에 접근하면 됩니다.

 

crud.list.onComplete = function(result) {
	console.log(result);
	if(result.result) {
		var dataList = result.data.result;
		var len = dataList.length;
		
		if(len > 0) {
			for(var i = 0; i < len; i++) { //=> for 앞에 코드만 집중해주세요
				var data = dataList[i];
				var path = data.path;
				var bannerEl = $($('.bannerBackground')[i]); //=> ★주목★
				
				bannerEl.css('background-image', `url('/weven_data/kssfedu/${path}')`);
			}
			
		}
	}
};

 

$('.bannerBackground')[i] 로 해당 태그에 접근하실수가 있습니다.  하지만 여기서 끝낼 것이 아니라 저 제이쿼리를 한번더 제이쿼리로 감싸줘야 줘야 합니다.

 

---

 

 

주의할 것이 $('.bannerBackground')[i] 와 $($('.bannerBackground')[i]) 은 엄연히 다릅니다. 

 

 

 

init(2)의 2라는 숫자가 제이쿼리 선택자가 가져온 태그의 갯수를 얘기합니다. 사용된 DOM에 bannerBackground 클래스를 가진 태그는 2개가 있다는 것이지요.

 

 

위와 같이 하면 DOM 내에 있는 모든 div를 가져오게 됩니다. 그리고 첫번째 div 태그에 접근하고 싶으면 아래와 같이 하면 됩니다.

 

 

따라서 $($('.bannerBackground')[0])  코드는 $('.bannerBackground')[0] 에 해당하는 태그를 가져온 후 가져온 태그에 대해 다시 제이쿼리로 감싸주면서 제이쿼리 함수들을 사용할 수 있게 해주는 것입니다.

 

 

 

 

읽어주셔서 감사합니다.

질문은 언제나 환영합니다.

 

"난 반드시 백엔드 왕이 될거야"