Question

我将此标记视为

<div id="one" class="content">
    <a href="#">a</a>
    <a href="#">b</a>
    <a href="#">c</a>
</div>
<div id="two" class="content">
    <a href="#">d</a>
    <a href="#">e/a>
</div>
<div id="three" class="content">
    <a href="#">f</a>
</div>

根据每个a中的div.content元素的数量，是否有一种方法可以为div.content元素分配不同的类。

例如，在div#one中，我有3个a个元素，所以我会$('div#one').addClass('three-img');在div#two中，我有两个a个元素，所以我会在$('div#two').addClass('two-img')中div#three，我只有1个a元素，所以我我会做$('div#three').addClass('one-img')。

以下jQuery代码仅适用于div#one。我想要的是一个通用代码，它将应用于页面中的每个div.content（可能有未知数量的div.content元素，其中包含1或2或3个a元素。

if($('#one a').length == 3){
    $('#one a').parent().addClass('three-img');
} else if($('#one a').length == 2){
    $('#one a').parent().addClass('two-img');
} else if($('#one a').length == 1){
    $('#one a').parent().addClass('one-img');
}

Answer 1

$('.content').each(function(i){
    $(this).addClass(i + 'img');
});

那样的东西？

Answer 2

我会这样做：

$(".content").each(function () {
    $(this).addClass("img_" + $(this).find("a").length);
});

假设您的课程名为img_1，img_2等。

Answer 3

这会有帮助吗？您可以使用类内容循环遍历所有div并获取当前divs children

$(document).ready(function(){
        $("div.content").each(function(e){
            var numberofchildren = $(this).find("a").length;
            if(numberofchildren == 3){
                $(this).addClass("three-img")   
            } 
            else if(numberofchildren == 2){
                $(this).addClass("two-img") 
            }
            else {
                $(this).addClass("one-img")     
            }
        });
    });

或者您可以动态添加类，如下所示

$(document).ready(function(){
        $("div.content").each(function(e){
            var numberofchildren = $(this).find("a").length;
            $(this).addClass("img-" + numberofchildren);

        });
    });

Answer 4

我会选择这样的事情：

var classes = { 1: 'one-img', 2: 'two-img', 3: 'three-img' };

$('div.content').each( function() {
  var content = $(this);
  content.addClass( classes[content.children().length] );
});

检查test here

Answer 5

var numbtxt = ['one', 'two', 'three'];

$('.content').each(function(){
    $(this).addClass(numbtxt[$('a', this).length-1]+'-img');
});

如何使用jQuery根据元素数分配特定的类

5 个答案: