jQuery 속성 끝 부분 선택자 활용하기: [name$="value"]

jQuery의 속성 끝 부분 선택자([name$="value"])는 지정한 값으로 끝나는 속성을 가진 요소를 선택할 때 사용됩니다. 이 선택자는 HTML 요소 중 특정한 속성 값을 가진 요소를 쉽게 선택할 수 있도록 도와줍니다. 여러 가지 예제를 통해 이 선택자의 활용을 살펴보겠습니다.

예제 1: 파일 확장자가 ".jpg"로 끝나는 이미지 선택

<img src="image1.jpg" alt="Image 1">
<img src="image2.png" alt="Image 2">
<img src="image3.jpg" alt="Image 3">

$("img[src$='.jpg']").addClass("jpg-image");

이 예제는 파일 경로의 끝이 ".jpg"로 끝나는 이미지 요소들을 선택하여 "jpg-image" 클래스를 추가합니다.

예제 2: 외부 링크가 ".com"으로 끝나는 링크 선택

<a href="http://example1.com">Example 1</a>
<a href="http://example2.org">Example 2</a>
<a href="http://example3.com">Example 3</a>

$("a[href$='.com']").addClass("external-link");

이 예제는 href 속성 값이 ".com"으로 끝나는 외부 링크를 선택하여 "external-link" 클래스를 추가합니다.

예제 3: CSS 클래스 이름이 "-active"로 끝나는 요소 선택

<div class="item-active">Item 1</div>
<div class="item">Item 2</div>
<div class="item-active">Item 3</div>

$("div[class$='-active']").addClass("active-item");

이 예제는 클래스 이름이 "-active"로 끝나는 요소를 선택하여 "active-item" 클래스를 추가합니다.

이렇게 jQuery의 속성 끝 부분 선택자를 활용하면 원하는 요소를 쉽게 선택하여 다양한 작업을 할 수 있습니다.