a

Câu hỏi Làm cách nào để kiểm tra xem một phần tử có bị ẩn trong jQuery không?


Có thể chuyển đổi khả năng hiển thị của một phần tử, bằng cách sử dụng các hàm .hide(), .show() hoặc là .toggle().

Làm thế nào bạn sẽ kiểm tra nếu một phần tử có thể nhìn thấy hoặc ẩn?


6705
2017-10-07 13:03


gốc


Nó đáng nói đến (ngay cả sau tất cả thời gian này), rằng $(element).is(":visible") làm việc cho jQuery 1.4.4, nhưng không cho jQuery 1.3.2, dưới Internet & nbsp; Trình khám phá & nbsp; 8. Điều này có thể được kiểm tra bằng Đoạn trích kiểm tra hữu ích của Tsvetomir Tsonev. Chỉ cần nhớ thay đổi phiên bản của jQuery, để kiểm tra theo từng phiên bản. - Reuben
Điều này có liên quan mặc dù một câu hỏi khác: stackoverflow.com/questions/17425543/… - Mark Schultheiss
Định nghĩa ẩn của bạn là gì? - fabspro


Các câu trả lời:


Vì câu hỏi đề cập đến một phần tử, mã này có thể phù hợp hơn:

// Checks css for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible"); 

// The same works with hidden
$(element).is(":hidden"); 

Giống như đề xuất của twernt, nhưng được áp dụng cho một phần tử đơn lẻ; và nó phù hợp với thuật toán được đề xuất trong Câu hỏi thường gặp về jQuery


8294
2017-10-07 13:30



Giải pháp này dường như sẽ khuyến khích sự đốt cháy visible=false và display:none; trong khi giải pháp của Mote rõ ràng làm mờ đi các lập trình viên để kiểm tra display:none; (thông qua đề cập đến ẩn và hiển thị kiểm soát nào display:none không phải visible=true) - kralco626
Đúng vậy, nhưng :visible cũng sẽ kiểm tra xem các thành phần gốc có hiển thị hay không, như chiborg đã chỉ ra. - Tsvetomir Tsonev
Bạn có một điểm - tôi sẽ nói rõ rằng mã chỉ kiểm tra display bất động sản. Cho rằng câu hỏi ban đầu là dành cho show() và hide()và họ đã đặt display, câu trả lời của tôi là chính xác. Bằng cách này nó hoạt động với IE7, đây là một đoạn thử nghiệm - jsfiddle.net/MWZss ; - Tsvetomir Tsonev
Tôi thực sự thấy rằng các từ logic ngược lại tốt hơn:! $ ('Selector'). (': Hidden'); đối với một số lý do. Đáng thử. - Kzqai
Đây là một thử nghiệm điểm chuẩn đơn giản là () đối với regexp:jsperf.com/jquery-is-vs-regexp-for-css-visibility. Kết luận: nếu bạn ra ngoài để thực hiện, sử dụng regexp over là () (vì () sẽ tìm tất cả các nút ẩn trước khi xem xét phần tử thực tế). - Max Leske


Bạn có thể dùng hidden bộ chọn:

// Matches all elements that are hidden
$('element:hidden')

visible bộ chọn:

// Matches all elements that are visible
$('element:visible')

1264
2017-10-07 13:16



hãy cẩn thận, có một số mẹo liên quan đến hiệu suất tốt trong bản trình bày này: addyosmani.com/jqprovenperformance - codecraig
Trên các trang từ 21 đến 28 nó hiển thị mức độ chậm: ẩn hoặc: hiển thị được so sánh với các bộ chọn khác. Cảm ơn bạn đã chỉ ra điều này. - Etienne Dupuis
Khi bạn đang xử lý một vài yếu tố và rất ít điều đang xảy ra - tức là CÁC TRƯỜNG HỢP VẬT LIỆU THƯỜNG XUYÊN R - RÀNG - vấn đề thời gian là một mối quan tâm rất nhỏ. Ôi không! Phải mất 42 ms thay vì 19 ms !!! - vbullinger
Tôi đang chuyển đổi phần tử này bằng cách sử dụng công cụ chọn này. $ ('element: hidden') luôn đúng với tôi! - ZoomIn
@cwingrav Bạn có thể muốn đọc lại tài liệu,: ẩn áp dụng cho tất cả các phần tử. Các phần tử biểu mẫu có type="hidden" chỉ là một trường hợp có thể kích hoạt: bị ẩn. Các phần tử không có chiều cao và chiều rộng, các phần tử có display: nonevà các yếu tố có tổ tiên ẩn cũng sẽ đủ điều kiện là: ẩn. - Joshua Walsh


if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
    // element is hidden
}

Phương thức trên không xem xét khả năng hiển thị của phụ huynh. Để xem xét cha mẹ là tốt, bạn nên sử dụng .is(":hidden") hoặc là .is(":visible").

Ví dụ,

<div id="div1" style="display:none">
  <div id="div2" style="display:block">Div2</div>
</div>

Phương pháp trên sẽ xem xét div2 hiển thị trong khi :visible không phải. Nhưng ở trên có thể hữu ích trong nhiều trường hợp, đặc biệt là khi bạn cần tìm xem có bất kỳ div lỗi nào hiển thị trong phụ huynh bị ẩn vì trong các điều kiện như vậy :visible sẽ không làm việc.


784
2017-10-07 13:09



Điều này chỉ kiểm tra thuộc tính hiển thị của một phần tử đơn lẻ. Thuộc tính: visible cũng kiểm tra khả năng hiển thị của các phần tử cha. - chiborg
Đây là giải pháp duy nhất làm việc cho tôi khi thử nghiệm với IE 8. - evanmcd
Đây không phải là giải pháp cho vấn đề của tôi, nhưng phương pháp đã giúp tôi xác định một sửa chữa để kiểm tra đối với một tài sản cho vấn đề của tôi. - dchayka
@chiborg Có, nhưng đôi khi đó là những gì bạn muốn và tôi đã phải học cách cứng như thế nào "thông minh" jQuery là ... - Casey
Điều này trả lời câu hỏi, là câu hỏi là về một phần tử duy nhất và bằng cách sử dụng hide(), show() và toggle() chức năng, tuy nhiên, như hầu hết đã nói, chúng ta nên sử dụng :visible và :hidden các lớp giả. - Jimmy Knoot


Không có câu trả lời nào trong số này giải quyết được những gì tôi hiểu là câu hỏi, đó là những gì tôi đang tìm kiếm, "Làm cách nào để xử lý các mục có visibility: hidden? ". Cũng không :visible cũng không :hidden sẽ xử lý điều này, vì cả hai đều tìm kiếm hiển thị trên mỗi tài liệu. Theo như tôi có thể xác định, không có bộ chọn nào để xử lý khả năng hiển thị CSS. Đây là cách tôi giải quyết nó (các bộ chọn jQuery chuẩn, có thể có một cú pháp đậm đặc hơn):

$(".item").each(function() {
    if ($(this).css("visibility") == "hidden") {
        // handle non visible state
    } else {
        // handle visible state
    }
});

451
2018-03-24 18:44



Câu trả lời này là tốt để xử lý visibility theo nghĩa đen, nhưng câu hỏi là How you would test if an element has been hidden or shown using jQuery?. Sử dụng jQuery có nghĩa là: display bất động sản. - MarioDS
Các yếu tố với visibility: hidden hoặc là opacity: 0 được coi là hiển thị, vì chúng vẫn chiếm không gian trong bố cục. Xem trả lời bởi Pedro Rainho và Tài liệu jQuery trên :visible bộ chọn. - awe
bạn cần phải đi qua DOM để kiểm tra cha mẹ của nút, hoặc người nào khác, điều này là vô ích. - vsync
điều này sẽ không hoạt động nếu bạn ẩn phần tử với .hide (). - user3197818


Từ Làm cách nào để xác định trạng thái của một phần tử được chuyển đổi?


Bạn có thể xác định liệu một phần tử có bị thu gọn hay không bằng cách sử dụng :visible và :hidden bộ chọn.

var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');

Nếu bạn chỉ đơn giản là hành động trên một yếu tố dựa trên khả năng hiển thị của nó, bạn chỉ có thể bao gồm :visible hoặc là :hidden trong biểu thức chọn. Ví dụ:

 $('#myDiv:visible').animate({left: '+=200px'}, 'slow');

322
2018-01-13 21:13



tự hỏi tại sao không có câu trả lời nào đề cập đến trường hợp khi phần tử được di chuyển ra khỏi cửa sổ hiển thị, như top:-1000px... Đoán nó là một trường hợp cạnh - jazzcat


Thường thì khi kiểm tra xem có cái gì đó có thể nhìn thấy hay không, bạn sẽ đi ngay phía trước ngay lập tức và làm điều gì đó khác với nó. jQuery chuỗi làm cho điều này dễ dàng.

Vì vậy, nếu bạn có một bộ chọn và bạn muốn thực hiện một số hành động trên nó chỉ khi có thể nhìn thấy hoặc ẩn, bạn có thể sử dụng filter(":visible") hoặc là filter(":hidden") tiếp theo là chuỗi nó với hành động bạn muốn thực hiện.

Vì vậy, thay vì if tuyên bố, như thế này:

if ($('#btnUpdate').is(":visible"))
{
     $('#btnUpdate').animate({ width: "toggle" });   // Hide button
}

Hoặc hiệu quả hơn, nhưng thậm chí xấu hơn:

var button = $('#btnUpdate');
if (button.is(":visible"))
{
     button.animate({ width: "toggle" });   // Hide button
}

Bạn có thể làm tất cả trong một dòng:

$('#btnUpdate').filter(":visible").animate({ width: "toggle" });

236
2017-07-25 10:21



Không có lý do nào để trích xuất nút DOM trong đoạn mã được sử dụng trong ví dụ và sau đó phải tìm lại nó. Tốt hơn là chỉ cần thực hiện: var $ button = $ ('# btnUpdate'); Và sau đó trong biểu thức If chỉ sử dụng nút $ thay vì $ (nút). Có lợi thế của bộ nhớ đệm đối tượng jQuery. - LocalPCGuy
đây là một ví dụ đơn giản jquerypot.com/… - Ketan Savaliya


Các :visible bộ chọn theo tài liệu jQuery:

  • Họ có một CSS display giá trị của none.
  • Chúng là các yếu tố hình thức với type="hidden".
  • Chiều rộng và chiều cao của chúng được đặt rõ ràng là 0.
  • Phần tử tổ tiên bị ẩn, vì vậy phần tử không được hiển thị trên trang.

Các yếu tố với visibility: hidden hoặc là opacity: 0 được coi là hiển thị, vì chúng vẫn chiếm không gian trong bố cục.

Điều này hữu ích trong một số trường hợp và vô dụng trong các trường hợp khác, bởi vì nếu bạn muốn kiểm tra xem phần tử có hiển thị hay không (display != none), bỏ qua khả năng hiển thị của bố mẹ, bạn sẽ thấy rằng .css("display") == 'none' không chỉ nhanh hơn mà còn trả về kiểm tra mức hiển thị một cách chính xác.

Nếu bạn muốn kiểm tra khả năng hiển thị thay vì hiển thị, bạn nên sử dụng: .css("visibility") == "hidden".

Cũng xem xét các ghi chú jQuery bổ sung:

Bởi vì :visible là một phần mở rộng jQuery và không phải là một phần của đặc tả CSS, các truy vấn sử dụng :visible không thể tận dụng lợi thế của tăng hiệu suất được cung cấp bởi DOM gốc querySelectorAll() phương pháp. Để đạt được hiệu suất tốt nhất khi sử dụng :visible để chọn các phần tử, trước tiên hãy chọn các phần tử bằng bộ chọn CSS tinh khiết, sau đó sử dụng .filter(":visible").

Ngoài ra, nếu bạn lo lắng về hiệu suất, bạn nên kiểm tra Bây giờ bạn thấy tôi ... hiển thị / ẩn hiệu suất (2010-05-04). Và sử dụng các phương pháp khác để hiển thị và ẩn các phần tử.


188
2017-11-25 09:16





Điều này phù hợp với tôi và tôi đang sử dụng show() và hide() để làm cho div của tôi ẩn / hiển thị:

if( $(this).css('display') == 'none' ){
    /* your code goes here */
} else {
    /* alternate logic   */
}

170
2017-07-06 20:19





Làm sao hiển thị phần tử và công trình jQuery;

Một phần tử có thể được ẩn với display:none, visibility:hidden hoặc là opacity:0. Sự khác biệt giữa các phương pháp đó:

  • display:none ẩn phần tử, và nó không chiếm bất kỳ không gian nào;
  • visibility:hidden ẩn phần tử, nhưng nó vẫn chiếm không gian trong bố cục;
  • opacity:0 ẩn phần tử là "chế độ hiển thị: ẩn" và vẫn chiếm không gian trong bố cục; khác biệt duy nhất là độ mờ cho phép một phần tử làm cho phần tử trong suốt một phần;

    if ($('.target').is(':hidden')) {
      $('.target').show();
    } else {
      $('.target').hide();
    }
    if ($('.target').is(':visible')) {
      $('.target').hide();
    } else {
      $('.target').show();
    }
    
    if ($('.target-visibility').css('visibility') == 'hidden') {
      $('.target-visibility').css({
        visibility: "visible",
        display: ""
      });
    } else {
      $('.target-visibility').css({
        visibility: "hidden",
        display: ""
      });
    }
    
    if ($('.target-visibility').css('opacity') == "0") {
      $('.target-visibility').css({
        opacity: "1",
        display: ""
      });
    } else {
      $('.target-visibility').css({
        opacity: "0",
        display: ""
      });
    }
    

    Các phương thức chuyển đổi jQuery hữu ích: 

    $('.click').click(function() {
      $('.target').toggle();
    });
    
    $('.click').click(function() {
      $('.target').slideToggle();
    });
    
    $('.click').click(function() {
      $('.target').fadeToggle();
    });
    

166
2018-04-24 21:04



Một sự khác biệt giữa visibility:hidden và opacity:0 là yếu tố sẽ vẫn phản hồi các sự kiện (như nhấp chuột) với opacity:0. Tôi đã học được rằng thủ thuật tạo nút tùy chỉnh để tải tệp lên. - urraka
cũng nếu bạn ẩn đầu vào với độ mờ: 0, nó vẫn được chọn bằng phím tab - YangombiUmpakati


Tôi sẽ sử dụng lớp CSS .hide { display: none!important; }.

Để ẩn / hiện, tôi gọi .addClass("hide")/.removeClass("hide"). Để kiểm tra khả năng hiển thị, tôi sử dụng .hasClass("hide").

Đó là cách đơn giản và rõ ràng để kiểm tra / ẩn / hiển thị các phần tử, nếu bạn không định sử dụng .toggle() hoặc là .animate() phương pháp.


134
2018-02-03 16:04



.hasClass('hide') không kiểm tra xem tổ tiên của cha mẹ có bị ẩn hay không (điều này cũng sẽ ẩn đi). Bạn có thể làm việc này một cách chính xác bằng cách kiểm tra xem .closest('.hide').length > 0, nhưng tại sao lại phát minh ra bánh xe? - nbrooks
Biến thể bạn đề xuất trả về nếu phần tử hiển thị trên html, biến thể của tôi trả về nếu phần tử bị ẩn trực tiếp bởi công cụ mã / xem javascript của bạn. Nếu bạn biết rằng các phần tử cha mẹ không bao giờ bị ẩn - hãy sử dụng .hasClass () để nghiêm ngặt hơn và ngăn chặn các lỗi trong tương lai. Nếu bạn muốn kiểm tra không chỉ hiển thị nhưng trạng thái phần tử cũng được đặt - hãy sử dụng .hasClass (). Trong các trường hợp khác .closest () là tốt hơn. - Evgeny Levin


Bạn cũng có thể làm điều này bằng cách sử dụng JavaScript đơn giản:

function isRendered(domObj) {
    if ((domObj.nodeType != 1) || (domObj == document.body)) {
        return true;
    }
    if (domObj.currentStyle && domObj.currentStyle["display"] != "none" && domObj.currentStyle["visibility"] != "hidden") {
        return isRendered(domObj.parentNode);
    } else if (window.getComputedStyle) {
        var cs = document.defaultView.getComputedStyle(domObj, null);
        if (cs.getPropertyValue("display") != "none" && cs.getPropertyValue("visibility") != "hidden") {
            return isRendered(domObj.parentNode);
        }
    }
    return false;
}

Ghi chú:

  1. Hoạt động ở mọi nơi

  2. Làm việc cho các phần tử lồng nhau

  3. Làm việc cho CSS và kiểu nội tuyến

  4. Không yêu cầu một khuôn khổ


128
2017-07-16 19:18



Hoạt động hơi khác với jQuery; nó xem xét visibility: hidden được có thể nhìn thấy. - alex
Thật dễ dàng để thay đổi mã ở trên để bắt chước hành vi jQuery (được cho là ngu ngốc). . . . . function isRendered (o) {if ((o.nodeType! = 1) || (o == document.body)) {return true;} if (o.currentStyle && o.currentStyle ["display"]! = "none") {return isRendered (o.parentNode);} else if (window.getComputedStyle) {if (document.defaultView.getComputedStyle (o, null) .getPropertyValue ("display")! = "none") {return isRendered (o.parentNode );}} trả về false;} - Matt Brock
Chắc chắn, tôi chỉ thêm rằng vì lợi ích của người dùng đã sử dụng tính năng này mà không cần quét mã của nó. :) - alex