Skip to Content
Go Back
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기(강의) 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12
📌 [번역] CSS 코드 냄새 2013-01-01

jQuery each() 함수-여러 객체에 같은 함수를 모두 적용해야 할 때

each() 함수를 아는지 모르겠다. 일단 jQuery의 API를 찾아 보시면 도움이 될 거라 생각한다.

이건 한마디로 말해서, ‘모든 애들에게 적용하라!’ 라는 함수다. 어려울 수 있으니 예제를 함께 보자.

오늘 내가 직면한 문제였는데,

<p class="소제목">나는야 소제목이다</p>

<h2>나는야 소제목이다</h2>

로 모두 바꿔야 했다. javascript를 이용해서 말이다. 추가로, 저런 소제목의 개수는 약 100개라고 생각하자.

효과적인 방법은 each() 함수를 사용하는 것이다.

$('p.소제목').each(function(){ 
  //class가 소제목인 p 전부에 아래 함수를 적용한다.
  //일단 text만 뽑아낸다.
  var text=$(this).text(); 
  //현재 통과중인 객체($(this))를 '<h2>'+text+'</h2>'로 바꿔치기
  $(this).replaceWith('<h2>'+text+'</h2>'); 
});

뭐, 쉽게 설명하지는 못한 것 같은데, 일단 each() 함수의 쓰임 정도는 간략히 알아볼 수 있었다고 생각한다.

요약하자면 이렇게 기억하면 된다. 객체들 전부에 뭔가 복잡한 함수를 적용하고 싶다면? each() 함수를 떠올려라. 긴 코드가 간단하게 줄어들 것이다. 이상.

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다