jQuery를 사용하여 요소가 'display : none'인지 또는 클릭시 차단되는지 확인하십시오.

239

숨겨진 요소를 확인하고 정렬하고 싶습니다. 속성 display과 값을 가진 모든 요소를 찾을 수 none있습니까?

jquery css

542

보이는 요소 에는 : visible 을 사용 하고 숨겨진 요소를 찾으려면 : hidden 을 사용할 수 있습니다 . 이 숨겨진 요소는 display속성이로 설정되어 none있습니다.

hiddenElements = $(':hidden');
visibleElements = $(':visible');

특정 요소를 확인합니다.

if($('#yourID:visible').length == 0)
{

}

요소가 문서에서 공간을 소비하면 표시되는 것으로 간주됩니다. 표시 요소는 0보다 큰 인 폭 또는 높이가 참조

또한 is () 를 사용할 수 있습니다:visible

if(!$('#yourID').is(':visible'))
{

}

표시 값을 확인하려면 css ()를 사용할 수 있습니다

if($('#yourID').css('display') == 'none')
{

}

디스플레이를 사용하는 경우 다음 값 display을 가질 수 있습니다.

디스플레이 : none

디스플레이 : 인라인

디스플레이 : 블록

디스플레이 : 목록-항목

디스플레이 : 인라인 블록

가능한 display값 의 전체 목록을 확인 하십시오 .

JavaScript로 표시 속성을 확인하려면

var isVisible = document.getElementById("yourID").style.display == "block";
var isHidden = document.getElementById("yourID").style.display == "none";

— 아딜
소스

글쎄, 내 시나리오에서 각 요소에는 ID가 있으므로 트릭은 나를 위해 작동합니다 :)

— Nicholas Francis

2

@NicholasFrancis, 숨겨진 모든 요소를 찾기 위해 답변을 업데이트했습니다.

— Adil

인라인 CSS도 확인합니까? display: block;jquery에서 인라인으로 작성된 CSS 가 있습니다. 귀하의 방법으로 확인할 수 없습니다. 도와 줘요.

— Gaurav Manral

jQuery가 추가되었으며 DOM에 추가 된 후 요소에 액세스하고 있습니까? 코드를 보여줄 수 있습니까? jsfiddle.net

— Adil

JavaScript equiv 란 무엇입니까?

— TheBlackBenzKid

56

$("element").filter(function() { return $(this).css("display") == "none" });

— 디 판슈 고얄
소스

7

+1 : 이것은 부모 요소가을 가지고 있더라도 작동 할 것이기 때문에 실제로 묻는 질문에 허용되는 답변보다 더 유용합니다 style="display: none;". 답변이 사용 :visible하고 :hidden그 선택기 페이지에 전체 가시성을 반환 당신이 특정 요소의 가시성을하려면 실패하고 부모 요소가 숨겨져있는 (이 질문은 질문하지 않았다).

— 코딩 사라지다

이것은 JS DOM 환경에서 unite 테스트를 실행할 때 작동합니다.

— b01

탭 플러그인의 경우 visibility: 'hidden';CSS 로 설정 되었으므로 확인도 다음과 같이 확인되었습니다.$(this).css('visibility') != 'hidden'

— phyatt

30

예, cssfunction을 사용할 수 있습니다. 아래는 모든 div를 검색하지만 필요한 요소에 맞게 수정할 수 있습니다

$('div').each(function(){

    if ( $(this).css('display') == 'none')
    {
       //do something
    }
});

— 즈쟈 보크
소스

13

이 조건을 사용하십시오.

if (jQuery(".profile-page-cont").css('display') == 'block'){
    // Condition 
}

— 라나
소스

11

jQuery에는 가시성을 확인하는 두 가지 방법이 있습니다.

$("#selector").is(":visible")

과

$("#selector").is(":hidden")

선택기의 가시성에 따라 명령을 실행할 수도 있습니다.

$("#selector:visible").hide()

또는

$("#selector:hidden").show()

— 루 체스
소스

6

참고 : 이것은 질문에 따라 부모 조상 가시성에 따라 선택된 요소의 특정 가시 속성을 반환 하지 않습니다:visible . 조상이라면 display: none모든 자손이 display상태에 관계없이 보이지 않을 것 입니다.

— 코딩 사라지다

10

$('#selector').is(':visible');

— 배리 채프먼
소스

3

참고 : 이것은 질문에 따라 부모 조상 가시성에 따라 선택된 요소의 특정 가시 속성을 반환 하지 않습니다:visible . 조상이라면 display: none모든 자손이 display상태에 관계없이 보이지 않을 것 입니다.

— 코딩 사라지다