[jquery] jquery 콘텐츠 탐색 선택자

콘텐츠 선택자는 요소 또는 속성의 포함 여부에 따라 특정 요소를 선택하는 선택자 입니다.

 

콘텐츠 탐색 선택자의 종류

종류	사용법	설명
$("요소 선택:contains(텍스트)")	$("li:contains('내용2')")	li 중 '내용2'라는 텍스트를 포함하는 요소만 선택.
$("요소 선택").contents()	$("p").contents()	선택 요소중 가장 가까운 하위요소 선택.
$("요소 선택:has(요소명)") $("요소 선택").has(요소명)	$("li:has('span')") $("li").has('span')	li 요소 중 span을 포함하는 요소만 선택.
$("요소 선택:not(:제외요소)") $("요소 선택").not(:제외요소)	$("li:not(:first)") $("li")	li 중 첫번째 요소만 제외하고 선택.
$(요소 선택).fillter(필터요소)	$("li").fillter(".list2")	li 중 calss 값이 "list2"인 요소만 선택.
$(요소 선택).find(요소선택2)	$("li").find("strong")	li 요소의 하위 요소인 <strong> 만 선택.
$("요소 선택1").closest("요소선택2")	$("strong").closest("div")	<strong>을 감싸는 상위 <div>중 가장가까운 상위 요소 선택.
$("요소 선택").탐색 선택자().end()	$("li").children("a").end()	필터링이 실행되기 이전의 요소인 li가 선택.

contains() / contents() / has(0 / not() / end() 탐색 선택자

$("요소 선택:contains(텍스트)")

$("요소 선택").contents()

$("요소 선택:has(요소명)")  /  $("요소 선택").has(요소명)

$("요소 선택:not(:제외요소)")  /  $("요소 선택").not(:제외요소)

$("요소 선택").탐색 선택자().end()

 

$(function(){
  $("#inner_1 p:contains(contains)")
  .css({"background-color":"powderblue"});

  $("#inner_1 p:has(strong)")
  .css({"background-color":"midnightblue"});

  $("#wrap").contents()
  .css({"border":"2px solid cadetblue"});

  $("#inner_2 p").not(":first")
  .css({"background-color":"lightgreen"});

  $("#inner_2 p").eq(2).end()
  .css({"color":"red"});
});

<div id="wrap">
  <h1>콘텐츠 탐색 선택자</h1>
  <section id="inner_1">
    <h1>contains(), contents(), has()</h1>
    <p>
      <span>contains</span>
    </p>
    <p>
      <span>contents</span>
    </p>
    <p>
      <span>has</span>
    </p>
  </section>
  <section id="inner_2">
    <h1>not(). end()</h1>
    <p>net()</p>
    <p>end()</p>
    <p>선택자 끝</p>
  </section>
</div>

1. p요소 중 contains를 포함하는 요소만 선택

2. p요소 중 strong 요소를 포함하는 요소만 선택

3. #wrap인 요소의 하위 요소의 텍스트와 태그 노드 선택

4. #inner_2의 하위 p요소에서 첫번째 요소만 제외하고 선택

5. #inner_2의 하위 요소 p에서 인덱스가 2인 요소를 선택.

그러나 end()를 적용하기 때문에 인덱스를 선택하기 전의 선택자가 적용됩니다.

 

find()  / filter() 탐색 선택자

1. $(요소 선택).find("하위 요소 중 필터링할 요소 선택")

-> 선택한 하위 요소 중에서 find() 로 필터링한 요소만 선택합니다.

 

2. $(요소 선택).fillter("선택한 요소 중 필터링할 요소 선택")

-> 선택한 요소 중에서 filter()로 필터링한 요소만 선택합니다.

 

$(function(){
  $("#inner_1").find(".txt1")
  .css({"background-color":"cadetblue"});

  $("#inner_1 p").filter(".txt2")
  .css({"background-color":"steelblue"});

  $("#inner_2 p").filter(function(idx,obj){
  console.log(idx);
  return idx %2 == 0;
  })
  .css({"background-color":"lightgreen"});	
});

<div id="wrap">
  <h1>콘텐츠 탐색 선택자</h1>
  <section id="inner_1">
    <h1>find(), filter()</h1>
    <p class="txt1">내용1</p>
    <p class="txt2">내용2</p>
  </section>
  <section id="inner_2">
    <h1>filter(function)</h1>
    <p>index 0</p>
    <p>index 1</p>
    <p>index 2</p>
    <p>index 3</p>
  </section>
</div>

1. #inner_1 하위 요소 중 .txt1인 요소를 선택.

2. #inner_1 하위 요소 중 .txt2인 요소를 선택.

3. #inner_2 하위 요소인 p의 개수만큼 익명 함수가 실행.