Comment changer la classe div en fonction de son contenu?

Question

Je veux changer la classe de la div si la longueur LI est supérieure à 3. et si moins de 3 alors le nom de classe devrait être le contenu et si plus de 3 alors le nom de classe devrait être "défilement contenu "

<div class="classname"> 

<ul> 
<li>Content</li> 
    <li>Content</li> 
    <li>Content</li> 
    <li>Content</li> 
</ul> 
    </div> 

Je préfère utiliser jQuery pour cela,

Answer 1

Essayez:

$("ul").each(function() { 
    $(this).parents("div.classname:first") 
    .addClass($(this).children().length > 3 ? "scroll-content" : "content"); 
}); 

ou peut-être quelque chose comme:

$("div.classname").each(function() { 
    $(this).addClass($(this).find("ul").children().length > 3 ? "scroll-content" : "content"); 
}); 

Answer 2

$(function() { 
    if ($("div.classname > ul li").length > 3) 
    { 
     $("div.classname").removeClass().addClass('anotherclass'); 
    } 
    else if (...) 
    { 
     // add another class 
    } 
}); 

Answer 3

Il peut être fait avec un seul appel et pas conditionals

$('ul li:nth-child(4)') 
    .closest('div') 
    .removeClass('content') 
    .addClass('scroll-content'); 

votre classe Cela suppose par défaut est « contenu » comme vous le suggérez. Cet appel trouve n'importe quel ul avec au moins 4 enfants (c'est-à-dire plus de 3), il trouve ensuite la div la plus proche qui est un parent, et supprime la classe par défaut et ajoute la classe scroll-content.