[JQuery]클래스의 존재여부를 확인하는 hasClass

탭메뉴 사용시 선택한 메뉴에 active클래스를 줘야하는 일이 발생한다.

그러기 위해서는 클래스가 존재하는지 존재여부를 판단해야 하는데

그럴때 사용하는 메소드가 hasClass이다.

 

<ul class="noticeTabArea">
    <li class="active>
        <a href="javascript:item.formSearch('tab');" data-value="CHN"> 중국 </a>
    </li>
    <li>
        <a href="javascript:item.formSearch('tab');" data-value="IND">인도</a>
    </li>
    <li>
        <a href="javascript:item.formSearch('tab');" data-value="IDN">인도네시아</a>
    </li>
    <li>
        <a href="javascript:item.formSearch('tab');" data-value="VNM">베트남</a>
    </li>
</ul>

예를들면 위와 같이 li태그로 만든 탭메뉴가 존재한다.

4개의 li태그 중 어떤 li에 active클래스가 적용됐는지 확인을 위해 hasClass를 사용한다.

내가 하고 싶은 작업은 active클래스가 적용된 li태그 안에 있는 a태그의 data-value의 값을 가지고 오고싶은데

hasClass에서는 $(this)를 사용할 수 없다. 

그렇기 때문에 each함수를 사용하여 li태그를 하나씩 탐색하면서

active클래스가 있는지 확인을하여 data-value를 가져 올 수 있다.

 

예제코드

<script>
$(".noticeTabArea li").each(function(){
	var NtnCd = $(this).find("a").attr("data-value");
	console.log("NtnCd : ",NtnCd);
    //결과: NtnCd : CHN
});
</script>