Vérifier, à l'aide de jQuery, si un élément est «afficher: aucun» ou bloquer sur clic

240

Je veux vérifier et trier les éléments cachés. Est-il possible de trouver tous les éléments avec attribut displayet valeur none?

jquery css Nicolas Francis
la source

Réponses:

543

Vous pouvez utiliser : visible pour les éléments visibles et : caché pour trouver les éléments cachés. Ces éléments cachés ont l' displayattribut défini sur none.

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

Pour vérifier un élément particulier.

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

}

Les éléments sont considérés comme visibles s'ils consomment de l'espace dans le document. Les éléments visibles ont une largeur ou une hauteur supérieure à zéro, Référence

Vous pouvez également utiliser is () avec:visible

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

}

Si vous voulez vérifier la valeur de l'affichage, vous pouvez utiliser css ()

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

}

Si vous utilisez l'affichage, les valeurs suivantes displaypeuvent avoir.

affichage: aucun

affichage: en ligne

bloc de visualisation

affichage: élément de liste

affichage: bloc en ligne

Consultez la liste complète des displayvaleurs possibles ici .

Pour vérifier la propriété d'affichage avec JavaScript

var isVisible = document.getElementById("yourID").style.display == "block";
var isHidden = document.getElementById("yourID").style.display == "none";
Adil
la source
eh bien, dans mon scénario, chaque élément a une ID, donc l'astuce fonctionne pour moi :)
Nicholas Francis
2
@NicholasFrancis, j'ai mis à jour ma réponse pour découvrir tous les éléments qui sont cachés.
Adil
Est-ce qu'il vérifie également les CSS en ligne. J'ai css display: block;écrit en ligne provenant de jquery. je ne peux pas le vérifier avec votre méthode. Aidez moi.
Gaurav Manral
JQuery est-il ajouté et vous accédez à l'élément après avoir été ajouté au DOM? Pouvez-vous me montrer le code? Il serait préférable de faire une démo sur jsfiddle.net
Adil
Qu'est-ce que l'équiv JavaScript?
TheBlackBenzKid
56 
$("element").filter(function() { return $(this).css("display") == "none" });
Deepanshu Goyal
la source
7
+1: Ceci est en fait plus utile que la réponse acceptée pour la question posée , car cela fonctionnera même si un élément parent l'a fait style="display: none;". Les réponses utilisant :visibleet :hiddenéchoueront si vous voulez une visibilité d'élément spécifique et qu'un élément parent est masqué car ces sélecteurs retournent une visibilité globale sur la page (ce qui n'était pas la question posée).
Fin du codage
Cela fonctionne lors de l'exécution du test unite dans l'environnement JS DOM.
b01
Pour un plugin de tabulation, il était configuré visibility: 'hidden';en css, donc la vérification a fini par vérifier également:$(this).css('visibility') != 'hidden'
phyatt
30

Oui, vous pouvez utiliser la fonction css. Ce qui suit recherchera toutes les divs, mais vous pouvez le modifier pour tous les éléments dont vous avez besoin

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

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

Utilisez cette condition:

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

Il existe deux méthodes dans jQuery pour vérifier la visibilité:

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

et 

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

Vous pouvez également exécuter des commandes en fonction de la visibilité dans le sélecteur;

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

ou 

$("#selector:hidden").show()
Luceos
la source
6
Remarque: cela ne retournera pas l'attribut visible spécifique des éléments sélectionnés, comme le demande la question, car cela :visibledépend également de la visibilité de l'ancêtre parent. Si un ancêtre est display: nonetous les descendants ne seront pas visibles quel que soit l' displayétat.
Fin du codage
10 
$('#selector').is(':visible');
Barry Chapman
la source
3
Remarque: cela ne retournera pas l'attribut visible spécifique des éléments sélectionnés, comme le demande la question, car cela :visibledépend également de la visibilité de l'ancêtre parent. Si un ancêtre est display: nonetous les descendants ne seront pas visibles quel que soit l' displayétat.
Fin du codage