如何<span>根据条件使用javascript</span>为html标签（ <span>）</span>添加类

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

Answer 1

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 span s 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.

Answer 2

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/

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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