Question

我需要根据<span>中<li>的数量添加样式类，我从以下代码开始：

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

您已经在使用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/

修改

我不确定您是否需要涵盖任何给定span中li个的所有情况。

如果你这样做......只需将上面的内容替换为..

$(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，fourspans class1，class2，class3，class4等等？

如果是这样，请查看此fiddle。这是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));
  });
});
});

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

如何根据javascript </span>的条件为html标记（<span>）添加一个类

6 个答案: