[jQuery]문자열의 시작, 중간, 끝으로 원하는 엘리먼트 찾아보자!!

jQuery로 문자열의 시작, 중간, 끝으로 원하는 엘리먼트 찾기: 마법 같은 팁들!

안녕하세요, 개발자 여러분! 😄 오늘은 정말 실생활에서 유용하고, 재미있게 쓸 수 있는 jQuery 팁을 알려드리려고 해요. 여러분이 HTML을 조작하면서 “이 엘리먼트 어디 갔어?!”라고 속으로 외쳐본 적, 한 번쯤 있으시죠? 바로 그럴 때 딱 필요한 기술이 오늘의 주제랍니다. 바로 문자열을 기준으로 엘리먼트를 찾는 방법이에요. 시작 문자열? 끝 문자열? 중간 문자열? 모두 해결해드릴게요!

시작은 이겁니다: 문자열의 시작으로 찾기

가장 기본이 되는 것은 ^ 기호를 사용하는 건데요. 이건 “~로 시작하는”이라는 뜻이에요. 마치 단어 퍼즐을 풀 때 첫 글자로 찾는 느낌이죠! 자, 간단한 예를 보여드릴게요.

<ul>
  <li id="apple">Apple</li>
  <li id="banana">Banana</li>
  <li id="apricot">Apricot</li>
</ul>

만약 “a”로 시작하는 아이디를 가진 엘리먼트를 찾고 싶다면 이렇게 쓰세요.

$('li[id^="a"]').css('color', 'red');

짜잔! 이제 아이디가 apple과 apricot인 li 요소의 텍스트가 빨간색으로 변했을 거예요. 여기서 ^=는 “이 문자열로 시작하는”이라는 뜻이에요. 정말 간단하죠?

중간을 파헤쳐볼까요? 문자열의 중간으로 찾기

“나는 단순히 시작만으로 만족 못해! 문자열 중간에 특정 문자가 들어가야 해!” 하시는 분들도 계실 거예요. 걱정 마세요, 그런 분들을 위한 방법도 있답니다.

중간에 특정 문자열이 들어있는지 확인할 땐 *=를 사용하면 됩니다. 정말 유용한 도구예요!

<ul>
  <li id="cat">Cat</li>
  <li id="caterpillar">Caterpillar</li>
  <li id="dog">Dog</li>
</ul>

여기서 “cat”이라는 단어가 들어간 아이디를 가진 요소를 찾으려면 이렇게 해요.

$('li[id*="cat"]').css('background-color', 'yellow');

이제 배경색이 노란색으로 변했죠? 무조건 특정 위치에 있을 필요 없이 문자열 중간만 보면 되니까 정말 자유로워요. 흡사 탐정이 된 기분이에요! 🔍

끝을 장식합시다: 문자열의 끝으로 찾기

마지막으로, “이 문자열로 끝나는” 경우를 살펴볼게요. 이건 $=라는 기호를 사용하면 돼요. 끝을 딱 잡아주는 기분이랄까요?

<ul>
  <li id="superman">Superman</li>
  <li id="batman">Batman</li>
  <li id="spiderman">Spiderman</li>
</ul>

여기서 “man”으로 끝나는 아이디를 가진 요소를 찾고 싶다면?

$('li[id$="man"]').css('font-weight', 'bold');

결과는? superman, batman, spiderman의 텍스트가 모두 굵게 표시됩니다. 정말 멋지죠? 🦸‍♂️

현실에서 어떻게 써요?

이 기능들은 특히 대량의 데이터를 다룰 때 유용해요. 예를 들어, 어떤 리스트나 테이블에서 특정 패턴을 가진 데이터를 스타일링해야 할 때 딱 맞아요. 그리고 jQuery의 이런 선택자는 간결하면서도 강력하기 때문에 시간을 많이 절약해 준답니다.

---

Tips for You!

• jQuery 선택자를 섞어 쓰면 더 강력한 검색이 가능해요.
• 다른 속성 (예: class, data-*)에도 동일한 방법을 적용할 수 있어요.
• 선택자가 너무 많아지면 성능에 영향을 줄 수 있으니 주의하세요.

오늘의 팁, 어떠셨나요? 글을 읽으면서 “어? 이거 나도 쓸 수 있겠는데?”라는 생각이 들었다면, 지금 바로 코드를 열고 시도해 보세요. 개발은 역시 손이 기억하게 하는 게 최고니까요! 😄