如何将类图片添加到超过10 li的ul

Question

我希望将类图片768或类图片1024与jquery一起添加到具有类下拉菜单并且有子女（li）超过10的ul 但是这段代码通过类下拉菜单为所有ul添加了类 我只想添加类图片768或类图片1024到超过10里的ul 请帮帮我

var ct = $('.dropdown-menu').children().size();
setclass(ct);	
function setclass($screensize)
{	
	if ($(window).width() > 1024) 
	{		
		if(ct>10)
		{			
			$('.dropdown-menu').addClass('picture1024');
			$('.dropdown-menu').removeClass('picture768');
		}
	}
	else if($(window).width() > 768 && $(window).width() <= 1024)
	{
		if(ct>10)
		{
			$('.dropdown-menu').addClass('picture768');
			$('.dropdown-menu').removeClass('picture1024');
		}
	}		
	else
	{		
		$('.dropdown-menu').removeClass('picture768');
		$('.dropdown-menu').removeClass('picture1024');		
	}				
}

.picture1024
{			
	display:none;
	box-shadow:0 0 2px #000;
	border-radius:3px;									
	position:absolute;
	background-color:#FFF !important;
	background-image:url(../img/menu-bg2.jpg);
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center bottom;			
	padding-bottom:120%;
	z-index:100;
	width:900%;
	li
	{
		&:hover
		{
			>a
			{
				background-color:transparent !important;
				color:$alizarin !important;
			}
		}
		a
		{
			color:#000 !important;
		}
		width:25%;
		float:right;
	}
}
.picture768
{			
	display:none;
	box-shadow:0 0 2px #000;
	border-radius:3px;									
	position:absolute;
	background-color:#FFF !important;
	background-image:url(../img/menu-bg2.jpg);
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center bottom;			
	padding-bottom:120%;
	z-index:100;
	width:700%;
	li
	{
		&:hover
		{
			>a
			{
				background-color:transparent !important;
				color:$alizarin !important;
			}
		}
		a
		{
			color:#000 !important;
		}
		width:33%;
		float:right;
	}
}

<ul>
<li> <a href="">product</a>
  <ul class="dropdown-menu" role="menu">
    <li><a href="">1</a></li>
    <li><a href="">1</a></li>
    <li><a href="">1</a></li>
    <li><a href="">1</a></li>    
    <li><a href="">1</a></li>
    <li><a href="">1</a></li>
    <li><a href="">1</a></li>
    <li><a href="">1</a></li>
    <li><a href="">1</a></li>
    <li><a href="">1</a></li>
    <li><a href="">1</a></li>
    <li><a href="">1</a></li>
    <li><a href="">1</a></li>
    <li><a href="">1</a></li>
    <li><a href="">1</a></li>
    <li><a href="">1</a></li>
    <li><a href="">1</a></li>
    <li><a href="">1</a></li>
    <li><a href="">1</a></li>
  </ul>
</li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li class="dropdown"> contact
  <ul class="dropdown-menu" role="menu">
    <li><a href="">5</a></li>
    <li><a href="">5</a></li>
  </ul>
</li>
</ul>

Answer 1

而不是if（ct> 10），它将与此类似：

if ($('ul.dropdown-menu li').length >= 11) {
  $("ul.dropdown-menu").addClass("picture1024");
  $("ul.dropdown-menu").removeClass("picture768");
}else
{       
  $('ul.dropdown-menu').removeClass('picture768');
  $('ul.dropdown-menu').removeClass('picture1024');     
}

Answer 2

请记住，当您致电

时

$('.dropdown-menu').addClass('picture768')

您在所有.dropdown-menu元素上设置该类。你可能想要的是在每个.dropdown-menu元素上调用setclass;

之类的东西

$('.dropdown-menu').each(setclass())

然后再做

$(this).addClass('picture768')

在setclass中。或者只是

$('.dropdown-menu').each(function() {

   if ($(this).children('li').size() > ...) { 
     addClass...

希望有所帮助。

Answer 3

我为你做了这个，它在这里工作：

function yourNewFunction(){ //cool name, eh?
    var uls = document.getElementsByTagName("ul"); //gets all the ul's from the page
    for(var x = 0; x < uls.length; x++)
    {
        var ulX = uls[x];
        if(hasClass(ulX.className,"dropdown-menu"))//check if have the class 'dropdown-menu'
        {
            var child = ulX.getElementsByTagName("li"); //get all the li's inside the ul
            ulX.className += (child.length > 10)?" picture768":" picture1024"; //add properly the desired class to your list
        }
    }
}

function hasClass(classeString, classe) //function to check if has the desired class into the object
{
    var classes = classeString.split(" ");
    for(var x = 0; x < classes.length; x++) { if(classes[x] == classe) { return true;  }}
    return false;
}

您只需致电yourNewFunction()，它就能正常工作，把它放在让您满意的地方，就像进入body onload事件一样。