javascript - Count the no of LI then add class to parent UL - Stack Overflow

admin管理员组

文章数量:1429078

<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>

I want to apply the class to the UL on base of the Count of the Inner LIs.

Like if it has two LI then the class should be like two-thumbs Like if it has one LI then the class should be like one-thumbs

I am trying this JS but not working it returns 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');
}
});

Here is the JSbin link to the same.

<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>

I want to apply the class to the UL on base of the Count of the Inner LIs.

Like if it has two LI then the class should be like two-thumbs Like if it has one LI then the class should be like one-thumbs

I am trying this JS but not working it returns 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');
}
});

Here is the JSbin link to the same.

http://jsbin./ofeda/edit

• javascript
• jquery
• html

Share Improve this question Follow asked May 11, 2010 at 11:33 Wasim ShaikhWasim Shaikh 7,0401818 gold badges6363 silver badges8888 bronze badges 2

• that jsbin is poping up "3" then "this ul has3 li" – tster Commented May 11, 2010 at 11:38
• 1 Most browsers do not support class names that start with a number. It should probably be something like col-2 instead. – Syntactic Commented May 11, 2010 at 11:53

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

Your code does not plement your explanation... you saying you want x-thumbs, but the code extract is doing nothing like that?

Do you mean something like this instead?

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

You're getting "thumbs-1" instead of "one-thumbs" here, because it's a 1,000,000 times easier, and as noticed in the ments, many browsers won't appreciate 1-thumbs

You're getting "1-thumbs" instead of "one-thumbs" here, because it's a 1,000,000 times easier :P

There's a pretty obvious bug in this, if I'm understanding what you're trying to do:

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

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

This will check all ul.tablib-ratings and will add classes according to li amounts. However the class names will be like 1-thumbs, 2-thumbs etc... but you can easily map the numbers to their written versions with a few lines of more code.

Hope it helps, Sinan.

You are counting the total number of lis nested within tags with the class taglib-ratings. Instead you need to loop through each ul with that class, then count the number of lis within that particular ul

 $(".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./ofeda/2

LINK TO UPDATED JSbin

本文标签： javascriptCount the no of LI then add class to parent ULStack Overflow