Jquery_jquery의 find 및 Each 메소드 사용 예

이 문서의 예에서는 Jquery의 find 및 각 메서드 사용법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

1. find() 메소드

jquery 선택기는 CSS의 명명 규칙을 사용하여 매우 강력하며 원하는 요소를 더 빠르고 편리하게 찾을 수 있습니다.

예:

$("#id")
$("#"+"id")
$(this)
$(element)

잠깐, 유연하게 사용하면 강력한 형태로 폭발할 수 있습니다.

그러나 실제 사용해보면 여전히 부족한 부분이 있다고 느껴집니다.

특정 요소 아래에서 특정 요소를 찾으려면 위의 방법에만 의존하여 $("#id")로 얻은 요소를 순회하여 해당 하위 요소를 가져와야 합니다. 결과적으로 매우 번거로워지고 코드의 양도 매우 많아집니다.

따라서 find() 메소드를 사용해야 합니다.

$("#id").find("#child");
$("#id").find(".child");
$("#id").find("input[type='image']");

매우 편리하고 사용하기 쉽습니다.

위의 find() 메소드 외에도 하위 요소를 찾는 방법도 있습니다.

$(".child",parent);

이 메서드는 find() 메서드와 결과가 동일하며 더 간결합니다.

예를 들어보겠습니다:

function(table){
   $("tr",table).css("background-color","red");
}

이 방법은 코드 재사용을 용이하게 하며 클로저 작성과 더 일관성이 있습니다.

2.each() 메소드

배열은 가끔 사용되는 경우가 많습니다. Each() 메소드를 알기 전에는 배열 순회를 접할 경우 일반적으로 다음과 같이 작성했습니다.

var arr = new Array();
arr.push(1);
arr.push(2);
arr.push(3);
for(var i =0;i<arr.length;i++)
{
   (function(m){
      console.log(this);
   })(i);
}

정말 번거롭네요! ! 이제 각각()을 사용할 수 있으므로 생활이 더 쉬워졌습니다. ​

위 코드에는 한 문장만 필요합니다.

var arr = new Array();
arr.push(1);
arr.push(2);
arr.push(3);
 
arr.each(function(){
  console.log(this);
});

각각 사용하고 나면 구조가 즉시 단순하고 우아해집니다.

이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.