jquery

jQuery - 형제 요소 셀렉터

4월 28, 2019
제어쿼리는 요소를 찾을 수 있는 다양한 방법을 제공합니다.

선택자 설 명
:first
$().first()		 선택한 요소가 처음으로 나오는 요소를 선택
:last
$().last()		 선택한 요소가 마지막으로 나오는 요소를 선택
:odd 짝수 번째에 위치하는 모든 요소를 선택
:even 홀수 번째에 위치하는 모든 요소를 선택
:eq(n)
$().eq(n)		 n 번째 인덱스 요소를 선택
:gt(n) n 인덱스보다 큰 모든 요소를 선택
:lt(n) n 인덱스보다 작은 모든 요소를 선택
$().index() 선택한 요소가 몇 번째 index 인지 반환
$().prev() 선택한 요소의 이전 요소를 선택
$().prevAll() 선택한 요소의 이전 요소 모두를 선택
$().prevUntil(s) 선택한 요소 이전 방향으로 범위 지정
선택한 요소에서 지정한 범위 내의 모든 요소를 선택
$().next() 선택한 요소의 다음 요소를 선택
$().nextAll() 선택한 요소의 다음 요소 모두를 선택
$().nextUnitil(s) 선택한 요소 다음 방향으로 범위 지정
선택한 요소에서 지정한 범위 내의 모든 요소를 선택
$().siblings() 선택한 요소를 제외한 모든 형제 요소를 선택
$().slice(start, end) start 와 end 사이의 모든 요소를 선택.
(음수이면 끝에서 시작함.)
:not(s) s 가 아닌 요소를 선택
:target 앵커가 있는 요소를 선택


:first 와 :last 선택자

:first 는 선택한 요소가 처음으로 나오는 요소를 선택하고, :last 는 마지막으로 나오는 요소를 찾습니다.

<script>
$(function(){
  /* $(".use-nth").first() 와 동일 */
  $(".use-nth:first").css("background", "#ccc");
  /* $(".use-nth").last() 와 동일 */
  $(".use-nth:last").css("background", "yellow");
});
</script>

<div class="use-nth">알 수 없는 브라우저</div>
<div class="use-nth">사파리</div>
<div class="use-nth">크롬</div>
<div class="use-nth">기타</div>



:odd 와 :even 선택자

이 선택자는 홀수 번째나 짝수 번째의 모든 요소를 선택합니다. 아래 예시는 홀수 번째에 해당하는 모든 요소를 회색으로 지정합니다.

<style>
#use-nth {
  border: 1px solid;
  width: 200px;
  padding: 10px;
}
</style>

<script>
$(function(){
  /* div:nth-child(2n) 과 동일한 결과를 얻음. */
  $("#use-nth :even").css("background", "#ccc");
});
</script>

<div id="use-nth">
  <div>알 수 없는 브라우저</div>
  <div>사파리</div>
  <div>크롬</div>
  <div>엣지</div>
  <div>파이어폭스</div>
  <div>익스플러어</div>
  <div>기타</div>
</div>



:eq(n), :gt(n), :lt(n) 선택자

:eg() 는 지정한 인덱스가 위치하는 요소를 선택하고, gt() 는 지정한 인덱스보다 큰 모든 요소를, lt() 는 지정한 인덱스보다 작은 모든 요소를 선택합니다.

<style>
#use-nth {
  border: 1px solid;
  width: 200px;
  padding: 10px;
}
</style>

<script>
$(function(){
  /* 세 번째 인덱스를 빨간색으로 ... */
  $("#use-nth :eq(2)").css("background", "red");

  /* 세 번째 인덱스 보다 큰
     인덱스 요소 모두를 회색으로 ... */
  $("#use-nth :gt(2)").css("background", "#ccc");

  /* 세 번째 인덱스 보다 작은
     인덱스 요소 모두를 노랑으로 ... */
  $("#use-nth :lt(2)").css("background", "yellow");
});
</script>

<div id="use-nth">
  <!-- 0 인덱스 -->
  <div>알 수 없는 브라우저</div>
  <!-- 1 인덱스 -->
  <div>사파리</div>
  <!-- 2 인덱스 :eq() -->
  <div>크롬</div>
  <!-- 3 인덱스 -->
  <div>엣지</div>
  <!-- 4 인덱스 -->
  <div>파이어폭스</div>
  <!-- 5 인덱스 -->
  <div>익스플러어</div>
  <!-- 6 인덱스 -->
  <div>기타</div>
</div>



$().index() 선택자

형제 요소 중에서 선택한 요소가 몇 번째 index 인지 반환하며, 0 부터 시작합니다. 형식은 다음 중 하나를 사용할 수 있습니다.

$().index();

$().index( 선택자 );

$().index( 요소 );

li 형제 요소 중에서 선택한 요소의 index 를 콘솔에 출력하는 예제입니다.

<style>
#hover li:hover {
  background-color: yellow;
}
</style>
<script>
$(document).ready(function(){  
  $('#hover li').on('click', function(){
    var indexNo = $(this).index();
    console.log(indexNo);
  });
});
</script>

<ul id="hover">
  <li>익스플로어</li>
  <li>사파리</li>
  <li>크롬</li>
  <li>기타</li>
</ul>

다음은 선택한 요소의 인덱스를 반환합니다.

<script>
$(document).ready(function(){ 
  $( "div#output" ).html( "인덱스: " +  $( "#b" ).index( "li" ) );
  // 결과 : 인덱스: 1
});
</script>

<ul>
  <li id="a">a</li>
  <li id="b">b</li>
  <li id="c">c</li>
</ul>
<div id="output"></div>

다음은 선택자를 이용한 결과입니다.

<script>
$(document).ready(function(){ 
  $("div#output").html("인덱스: " + $("li").index( $("#b") ));
  // 결과 : 인덱스: 1
});
</script>

<ul>
  <li id="a">a</li>
  <li id="b">b</li>
  <li id="c">c</li>
</ul>
<div id="output"></div>

다음은 this 를 이용해 인덱스를 얻습니다.

<script>
$(document).ready(function(){  
  $('#hover li').on('click', function(){
    var indexNo = $('#hover li').index(this);
    console.log(indexNo);
  });
});
</script>

<ul id="hover">
  <li>익스플로어</li>
  <li>사파리</li>
  <li>크롬</li>
  <li>기타</li>
</ul>


:prev(), :next() 선택자

선택한 요소에서 이전(또는 다음) 요소를 선택할 수 있습니다. 이전(또는 다음) 요소 모두를 선택하려면 :prevAll() 이나 :nextAll() 를 사용하세요.

<style>
#use-nth {
  border: 1px solid;
  width: 200px;
  padding: 10px;
}
</style>

<script>
$(function(){
  /* 세 번째 인덱스에서 다음 요소를 빨간색으로 ... */
  $("#use-nth :eq(2)").next().css("background", "red");

  /* 세 번째 인덱스에서 다음-다음 요소를 노랑색으로 ... */
  $("#use-nth :eq(2)").next().next().css("background", "yellow");
});
</script>

<div id="use-nth">
  <!-- 0 인덱스 -->
  <div>알 수 없는 브라우저</div>
  <!-- 1 인덱스 -->
  <div>사파리</div>
  <!-- 2 인덱스 :eq() -->
  <div>크롬</div>
  <!-- 3 인덱스 -->
  <div>엣지</div>
  <!-- 4 인덱스 -->
  <div>파이어폭스</div>
  <!-- 5 인덱스 -->
  <div>익스플러어</div>
  <!-- 6 인덱스 -->
  <div>기타</div>
</div>



:prevUntil(s) 과 :nextUntil(s) 선택자

선택한 요소를 기준으로 이전(또는 다음) 방향으로 지정한 범위 내의 요소를 모두 선택합니다. 다음은 "클래스3" 에서 "클래스6" 사이의 요소를 선택합니다.

<style>
#use-nth {
  border: 1px solid;
  width: 200px;
  padding: 10px;
}
</style>

<script>
$(function(){
  $("#use-nth .3").nextUntil(".6").css("background", "yellow");
});
</script>

<div id="use-nth">
  <div class="1">알 수 없는 브라우저</div>
  <div class="2">사파리</div>
  <!-- 클래스3 을 기준으로 -->
  <div class="3">크롬</div>
  <div class="4">엣지</div>
  <div class="5">파이어폭스</div>
  <!-- 클래스6 사이의 요소를 선택 -->
  <div class="6">익스플러어</div>
  <div class="7">기타</div>
</div>



$().siblings() 선택자

선택한 요소를 제외한 모든 요소를 선택합니다.

<style>
#use-nth {
  border: 1px solid;
  width: 200px;
  padding: 10px;
}
</style>

<script>
$(function(){
  $("#use-nth .3").siblings().css("background", "yellow");
});
</script>

<div id="use-nth">
  <div class="1">알 수 없는 브라우저</div>
  <div class="2">사파리</div>
  <div class="3">크롬</div>
  <div class="4">엣지</div>
  <div class="5">파이어폭스</div>
  <div class="6">익스플러어</div>
  <div class="7">기타</div>
</div>



$().slice(start, end) 선택자

start 와 end 사이의 모든 요소를 선택하며, 음수는 끝에서 시작합니다.

<style>
#use-nth {
  border: 1px solid;
  width: 200px;
  padding: 10px;
}
</style>

<script>
$(function(){
  $("#use-nth div").slice(1, 4).css("background", "yellow");
});
</script>

<div id="use-nth">
  <div>알 수 없는 브라우저</div>
  <div>사파리</div>
  <div>크롬</div>
  <div>엣지</div>
  <div>파이어폭스</div>
  <div>익스플러어</div>
  <div>기타</div>
</div>



:not(s) 선택자

s 가 아닌 요소를 찾습니다.

<style>
#use-nth {
  border: 1px solid;
  width: 200px;
  padding: 10px;
}
</style>

<script>
  $(function(){
    $("#use-nth :not(div)").css("background", "yellow");
  });
</script>

<div id="use-nth">
  <div>알 수 없는 브라우저</div>
  <div>사파리</div>

  <!-- div 요소가 아니므로 일치 -->
  <aa>크롬</aa>
  <div>기타</div>
</div>


Tag:

0 Comments

0 댓글