如何<span>根據條件使用javascript</span>為html標簽（ <span>）</span>添加類

Question

我需要根據<li>中<span>的數量添加樣式類，我從以下代碼開始：

$(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示例

Answer 1

您已經在使用jQuery，所以我將單獨使用它。 更容易做，更容易閱讀...

$(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/

編輯

我不確定您是否需要涵蓋任何給定li的span ＃的所有情況。

如果您這樣做...只需將以上內容替換為..

$(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/

上面將涵蓋所有情況，假設您希望增加1。如果需要更具體的范圍，請告訴我。

Answer 2

由於您已經在使用jQuery，因此可以稍微優雅一些​​：)

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

我的意思是，這不是一種完美的方法，但是由於您已經在使用jQuery，為什么不一直使用它： http : //jsfiddle.net/4oqss5rc/

您會找到列表，並遍歷每個子li元素。 您檢查孩子的數量並申請課程。

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

您是說要根據li中包含的跨度數來更改跨度的類嗎？ 例如，三個范圍-> class1，class2，class3，四個范圍class1，class2，class3，class4等等？

如果是這樣，請檢查這個小提琴 。 這是js：

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

Answer 5

您可以使用以下

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

小提琴鏈接

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