How to add a class for html tag (<span>) depending a condition with javascript

Question

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

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

Cayce K · Accepted Answer · 2014-12-31 17:42:06Z

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.

Andreas · Accepted Answer · 2014-12-31 15:17:58Z

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/

answered Dec 31, 2014 at 15:17

Andreas

21.9k7 gold badges52 silver badges58 bronze badges

2 Comments

Chad Over a year ago

Perfect, a simpler and better solution than mine.

Andreas Over a year ago

@Chad Just another one, which maybe fulfills the unspoken requirement of the TO - or not^^

acontell · Accepted Answer · 2014-12-31 15:18:48Z

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;
    });
});

answered Dec 31, 2014 at 15:18

acontell

6,9321 gold badge23 silver badges33 bronze badges

Comments

Chad · Accepted Answer · 2014-12-31 15:15:57Z

0

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');               
        }
    });
});

answered Dec 31, 2014 at 15:15

Chad

5,4184 gold badges27 silver badges36 bronze badges

Comments

Sandeep · Accepted Answer · 2014-12-31 15:31:01Z

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

answered Dec 31, 2014 at 15:31

Sandeep

1,15410 silver badges16 bronze badges

Comments

Termininja · Accepted Answer · 2016-12-17 10:22:33Z

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");
        }
    });

edited Dec 17, 2016 at 10:22

Termininja

7,05412 gold badges51 silver badges50 bronze badges

answered Dec 31, 2014 at 20:48

user3434217

31 bronze badge

Collectives™ on Stack Overflow

How to add a class for html tag (<span>) depending a condition with javascript

6 Answers 6

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related