计算 LI 的数量，然后将类添加到父 UL答案

【问题标题】：Count the no of LI then add class to parent UL计算 LI 的数量，然后将类添加到父 UL
【发布时间】：2010-05-11 20:54:06
【问题描述】：

<ul class="taglib-ratings thumbs">
<li id="qezr_yourRating">
  <a href="javascript:;" class="rating rate-up "></a>
</li>
</ul>

<ul class="taglib-ratings thumbs">
<li id="qezr_yourRating">
  <a href="javascript:;" class="rating rate-up "></a>
</li>
<li id="qezr_yourRating">
  <a href="javascript:;" class="rating rate-up "></a>
</li>
</ul>

我想根据内部 LI 的计数将该类应用于 UL。

如果它有两个 LI，那么这个类应该像两个拇指如果它有一个 LI，那么这个类应该像一个拇指

我正在尝试这个 JS 但不工作它返回 2

jQuery(document).ready(function(){
var countLi = $(".taglib-ratings > li").size();
alert(countLi);
if(countLi == 2)
{
  $(this).parent('.taglib-ratings').addClass('2-col');
  alert ('this ul has 2 li');
}
else if(countLi == 1)
{
  $(this).parent('.taglib-ratings').addClass('2-col');
   alert ('this ul has 1 li');
}
else if(countLi > 2)
{
  alert ('this ul has'+ countLi +' li');
}
});

这是相同的 JSbin 链接。

http://jsbin.com/ofeda/edit

【问题讨论】：

那个jsbin弹出“3”然后“this ul has3 li”
大多数浏览器不支持以数字开头的类名。它可能应该是 col-2 之类的东西。

标签： javascript jquery html

【解决方案1】：

你的代码不能补充你的解释......你说你想要 x-thumbs，但代码提取没有做这样的事情？

你的意思是这样的吗？

$('ul.tablib-ratings').addClass(function () {
    return 'thumbs-' + $(this).children('li').size();
});

您在这里得到的是“thumbs-1”而不是“one-thumbs”，因为它要容易 1,000,000 倍，而且正如 cmets 中所注意到的，许多浏览器不会欣赏 1-thumbs

~~你在这里得到的是“1-thumbs”而不是“one-thumbs”，因为它要容易 1,000,000 倍：P~~

【讨论】：

大多数浏览器不支持以数字开头的类名。它可能应该是 thumbs-1 之类的东西。
嗯...thumbs-1 然后是：P

【解决方案2】：

如果我理解您要执行的操作，则其中有一个非常明显的错误：

else if(countLi == 1)
{
 $(this).parent('.taglib-ratings').addClass('2-col'); // shouldn't this be 1-col?
 alert('this ul has 1 li');
}

【讨论】：

【解决方案3】：

$('ul.tablib-ratings').each(function(i,ul){
    li_amount = $(ul).find('li').length;
    $(ul).addClass(li_amount+"-thumbs");
});

这将检查所有ul.tablib-ratings 并将根据li 数量添加类。然而，类名会像1-thumbs、2-thumbs 等......但您可以通过添加几行代码轻松地将数字映射到它们的书面版本。

希望对你有帮助，思南。

【讨论】：

each的第二个参数是DOM Element，不是jQuery对象。
@matt 谢谢，你的编辑是正确的......但这绝对有效......

【解决方案4】：

您正在计算嵌套在类taglib-ratings 的标签中的lis 总数。相反，您需要使用该类遍历每个 ul，然后计算该特定 ul 中 lis 的数量

【讨论】：

【解决方案5】：

 $(".taglib-ratings").each(function(){

    if ($(this).children('li').size() == 2 )
    {
      $(this).addClass('Two');
       $(this).append('Two');
      }
    else if ($(this).children('li').size() == 1 )

        {
      $(this).addClass('one');
       $(this).append('One');
      }

  });

http://jsbin.com/ofeda/2

LINK TO UPDATED JSbin

【讨论】：