jQuery를 사용한 표시된(div:visible) 요소 선택하기

jQuery의 ":visible" 필터는 웹 페이지에서 현재 표시된(visible) 요소를 선택하는 데 사용됩니다. 이는 사용자가 볼 수 있는 요소를 선택하여 특정 작업을 수행하거나 조건을 검사할 때 유용합니다. 아래 예제를 통해 jQuery에서 ":visible" 필터를 사용하여 표시된 요소를 선택하는 방법을 살펴보겠습니다.

예제 1: 페이지에서 모든 표시된 요소 선택하기

$(document).ready(function() {
    var visibleElements = $("div:visible");
    visibleElements.css("border", "2px solid green");
});

이 예제는 페이지에서 모든 표시된(div:visible) 요소를 선택하고, 해당 요소의 테두리를 초록색으로 변경합니다.

예제 2: 특정 클래스를 가진 표시된 요소 선택하기

$(document).ready(function() {
    var visibleWithClass = $("div.visible-class:visible");
    visibleWithClass.fadeOut();
});

이 예제는 "visible-class" 클래스를 가진 표시된(div:visible) 요소를 선택하고, 해당 요소를 서서히 페이드아웃 처리합니다.

예제 3: 특정 부모 요소 안에서 표시된 요소 선택하기

$(document).ready(function() {
    var visibleInParent = $("#parentContainer div:visible");
    visibleInParent.addClass("highlight");
});

이 예제는 id가 "parentContainer"인 부모 요소 안에 있는 표시된(div:visible) 요소를 선택하고, 해당 요소에 "highlight" 클래스를 추가합니다.