jquery - 如何给超过10里的ul添加类(class)图片

Question

我想用 jquery 添加 class picture768 或 class picture1024 到 ul 谁有 class dropdown-menu 并且有 child (li) 超过 10 但是此代码使用类下拉菜单向所有 ul 添加类 我只想将类 picture768 或类 picture1024 添加到拥有超过 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');     
}