web-dev-qa-db-fra.com

Vérifiez, en utilisant jQuery, si un élément est 'display: none' ou bloquez au clic

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

jquerycss
214
Nicholas Francis

Vous pouvez utiliser : visible pour les éléments visibles et : hidden pour trouver des éléments cachés. L'attribut display de ces éléments masqués est 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 occupent 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 d'affichage, vous pouvez utiliser css ()

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

}

Si vous utilisez, affichez les valeurs suivantes que display peut avoir.

affichage: aucun

affichage: en ligne

bloc de visualisation

affichage: élément de liste

affichage: bloc en ligne

Vérifier la liste complète des valeurs display 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";
490
Adil
$("element").filter(function() { return $(this).css("display") == "none" });
50
Deepanshu Goyal

Oui, vous pouvez utiliser la fonction css. Le ci-dessous va rechercher tous 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
    }
});
26
jjhavokk
$('#selector').is(':visible');
10
Barry Chapman

Il y a 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()
10
Luceos

Utilisez cette condition:

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