[제이쿼리] 특정 요소만 포함/ 제외시켜보기 : Programming Story

`1. Intro`

<body>
	<ul id="myList">
		<li>내용1</li>
		<li>내용2</li>
		<li>내용3</li>
		<li>내용4</li>
	</ul>
</body>

위와 같은 html 코드가 있다고 했을 때 이 중 첫 번째 <li> 요소만 제외시킨 <li>의 배경에 노란색을 적용하고 싶다면 어떻게 할 수 있을까?

우선 여기서 html 코드를 이해하는 것이 필요한데 <li> </li> 태그는 list의 약자로 목록을 만드는 태그이다. 이 태그는 <ul></ul> 태그 혹은 <ol></ol> 태그 내부에 들어가게 된다.

여기서 <ol>과 <ul>의 차이는 순서가 있는 리스트인지, 순서가 없는 리스트인지의 차이다.

<ol></ol> 태그는 1. 2. 와 같이 순서가 있는 ordered list를 만들게 되고, <ul></ul> 태그는 순서가 없는 리스트를 말하게 된다.

그렇다면, 문제에서 주어진 것처럼 첫 번째 <li> 요소만 제외시키고 <li>의 배경에 노란색을 적용하고 싶다면,

<script>
$(function(){
	$("#myList li").not(":first")
	.css("background-color","yellow");
});
</script>

이렇게 쓸 수 있는 것이다.

#myList 아이디 중에서 li 태그 중 first 즉 첫 번째 <li> 요소만 제외시키고 background-color를 yellow로 하라 라는 뜻이다.

여기중에서 :first 라고 쓰여진 것을 위치탐색 선택자라고 부른다.

위치탐색 선택자의 다양한 종류에 대해서 알고 싶으면,

이 링크로 들어가서 확인해보자.

그렇다면 이번에는 특정 태그만 선택하여 배경을 노란색으로 적용하고 싶다면 어떤 식으로 코드를 작성하면 될까?

<script>
$(function(){
	$("#myList li").eq(2)
	.css("background-color","yellow");
});
</script>

위 링크인 위치 탐색선택자에서도 다루었듯이 eq()를 사용하면 된다.

이는 2번 인덱스, 즉 3번째 태그만 선택을 하고 싶다는 것이다.

만약 2번 인덱스보다 작은 인덱스의 태그를 참조하고 싶다면 eq를 lt로, 큰 인덱스의 태그를 참조하고 싶다면 eq를 gt로 바꾸면 된다.