0

I need to add style classes according to the number of <span> in a <li> I start with the following code:

$(document).ready(function() {
    var ul = document.getElementsByTagName("ul");
for (var i, li; li = ul.childNodes[i]; i++) {
    if (li.tagName == 'LI') {
        var container = li.getElementsByTagName("span");
        var nb = container.length;
            if (nb == 1) 
        {
            container[0].childNodes[0].setAttribute("class", "class1")
        } 
            else if (nb == 2) 
        {
            container[0].childNodes[0].setAttribute("class", "class2")
            container[0].childNodes[1].setAttribute("class", "class3")
        }
    }
}});

JsFiddle Example

1
  • question.. do you expect an infinite number of spans in any given li?
    – Cayce K
    Commented Dec 31, 2014 at 15:15

6 Answers 6

4

You are already using jQuery so I'm going to use that by itself. A lot easier to do and easier to read...

$(document).ready(function() {
    var ul = $('ul');

    var lis = ul.find('li');

    lis.each(function(){
        var spans = $(this).find('span');
        if(spans.length == 1){
            spans.addClass('class1');
        }
        if(spans.length == 2){
            $(this).find('span:first-child').addClass('class2').next('span').addClass('class3');
        }
    });    
});

http://jsfiddle.net/yXyCk/135/

Edit

I'm not sure if you need to cover all cases of # of spans in any given li.

If you do... just replace the above with..

$(document).ready(function() {
    var ul = $('ul');

    var lis = ul.find('li');

    lis.each(function(){
        var spans = $(this).find('span');
        spans.each(function(index){
            $(this).addClass('class'+(index+1));
        });
    });    
});

http://jsfiddle.net/yXyCk/137/

The above will cover all cases assuming you want to increment by 1. If you need a more specific range please let me know.

3

As you're already using jQuery this can be done slightly more elegant :)

$(document).ready(function () {
    $("ul li").each(function () {
        // bug/feature: this will also add classes for elements greater 2
        $(this).find("span").each(function(index) {    
            this.className = "class" + (index + 1);
        });
    });
});

http://jsfiddle.net/mj4s7smk/

2
  • Perfect, a simpler and better solution than mine.
    – Chad
    Commented Dec 31, 2014 at 15:25
  • @Chad Just another one, which maybe fulfills the unspoken requirement of the TO - or not^^
    – Andreas
    Commented Dec 31, 2014 at 15:28
1

I mean, this isn't a perfect way of doing it, but since you're already using jQuery, why not go all the way: http://jsfiddle.net/4oqss5rc/

You find your list, and iterate through each of the children li elements. You check the amount of children and apply your classes.

$(document).ready(function() { 
    var $ul = $('ul');
    $ul.find('li').each(function() {
        var l = $(this).children('span').length;
        if(l == 1) {
            $(this).children(':eq(0)').addClass('class1');
        } else if(l == 2) {
            $(this).children(':eq(0)').addClass('class2');
            $(this).children(':eq(1)').addClass('class3');               
        }
    });
});
1

Do you mean you want to change the class of the span depending on the number of spans contained in a li? For instance, three spans-> class1, class2, class3, four spans class1, class2, class3, class4 and so on?

If that is so, check out this fiddle. Here's the js:

$.each($("ul li"), function (index, item) {
    var counter = 1;
    $.each($("span", item), function (ind, ite) {
        $(ite).addClass("class" + counter);
        counter += 1;
    });
});
0

You can use following

$(document).ready(function() {
$('li').each(function(){
  var $this = $(this);
  $this.children("span").each(function(index){
    $(this).addClass("class"+ (index+1));
  });
});
});

Fiddle link

0
$(document).ready(function() {

    //$("li").children().first().css("color","red")
    alert($("li span").length);
    $( "li" ).each(function( index ) {
        if($("span",this).length == 1){
            $("span",this).addClass("class1");
        }else{
            $("span:nth-child(1)",this).addClass("class2");
            $("span:nth-child(2)",this).addClass("class3");
        }
    });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.