JavaScript/jQuery) closest(), find()

Closest(), find() 함수는 모두 선택한 요소를 기점으로 특정 요소를 찾는 역할을 한다.

Closest()

 jQuery 선택자로 선택한 요소로부터 상위 요소로 옮겨가며 해당 조건에 맞는 요소를 찾을 때까지 탐색한다. 조건에 맞는 가장 가까운 부모 요소를 찾으면 탐색을 중단한다.

<div id="one">
	<ul id="two">
    	<li></li>
        <li id="selectedElement"></li>
    </ul>
</div>

<script>
	var one = $('#selectedElement').closest('#one');
</script>

 

find()

 jQuery 선택자로 선택한 요소로부터 하위 요소로 옮겨가며 해당 조건에 맞는 요소를 찾을 때까지 탐색한다. 조건에 맞는 가장 가까운 자식 요소를 찾으면 탐색을 중단한다.

<div id="one">
	<ul id="two">
    	<li></li>
        <li id="selectedElement"></li>
    </ul>
</div>

<script>
	var two1 = $('#one').find('#two');
    var two2 = $('#one').find('>#two'); // 바로 하위의 요소 중 id가 'two'인 요소 탐색
    // two1, two2 모두 같은 요소('ul #two')를 가리킨다.
</script>

 

 

cf. filter()

 자신의 자식(하위) 요소들 중 조건에 맞는 모든 요소를 찾는다. find()와 마찬가지로 자식 요소에서 검색하는 역할을 수행하나, 그 대상이 하나인지 여러개인지에 차이가 있다.

<div>
	<ul id="array">
    	<li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
    </ul>
</div>

<script>
	// id가 'array'인 요소의 하위 요소들 중 class가 'item'인 요소들에 모두 'added' 클래스 추가
	$('#array').filter('>li .item').addClass('added');
</script>

 

cf. Javascript - Array.prototype.filter()

 jQuery의 filter함수와는 다르다. Javascript의 filter 함수는 배열(하위 요소가 아님)에서 특정 조건을 만족하는 요소들에 한해서 로직을 처리할 수 있다.

<div>
	<ul id="array">
    	<li class="item1"></li>
        <li class="item2"></li>
    	<li class="item1"></li>
        <li class="item2"></li>
	</ul>
</div>

<script>
  // id가 'array'인 요소의 하위 요소들 중 class가 'item'인 요소들에 모두 added2' class 추가
  var array = document.getElementById('array');
  var items = array.children;

  var item1Arr = items.filter(function(item){
      item.class == 'item1';
  }

  // 'item1'을 class로 갖는 요소들에 'item3' class 추가
  for(let item : item1Arr){
      item.classList.add('item3');
  }
</script>