jQuery.has() est toujours vrai

Question

J'ai ce code HTML sur une page:

<div class="category-products"> 
    <div class="rugs-cat"></div> 
    .... 
</div> 

Et cette autre:

<div class="category-products"> 
    <div class="toolbar-top"></div> 
    ..... 
</div> 

Et je suis en train d'ajouter un style si .category-products a .rugs-cat en tant que descendant et l'enlever si ce n'est pas le cas. J'ai essayé ceci (exécuté sur dom ready):

if(jQuery(".category-products").has(".rugs-cat")) { 
    jQuery(".category-products").css("margin-left", "150px") 
} 
else { 
    jQuery(".category-products").css("margin-left", "0"); 
} 

Mais la marge est ajoutée à chaque fois. Je suis sûr qu'il n'y a aucune classe .rugs-cat n'importe où dans la deuxième page.

Answer 1

has() retournera toujours un objet (une collection). Cette collection sera parfois vide, ce qui est ce que vous voulez pour tester:

if (jQuery(".category-products").has(".rugs-cat").length > 0) 
{ 
    jQuery(".category-products").css("margin-left", "150px") 
} 
else 
{ 
    jQuery(".category-products").css("margin-left", "0") ; 
} 

Answer 2

Vous assumez $el.has(pattern) retourne true si el a un descendant correspondant pattern. En fait, il renvoie l'ensemble des éléments qui ont un tel élément. S'il n'y en a pas, il renvoie [] (ensemble vide) ce qui est vrai. Au lieu de cela, utilisez ce

(jQuery(".category-products").has(".rugs-cat").length) 

cette évalue à vrai [] a une length de 0;

Answer 3

Official documentation dit méthode has()récupérer tableau d'éléments trouvés, pas booléen. Vous avez besoin

if (jQuery(".category-products").has(".rugs-cat").length > 0) 

au lieu de

if (jQuery(".category-products").has(".rugs-cat")) 

voir jsfiddle example