jquery - 如何使用 jQuery 根据元素数量分配特定类

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>

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

例如，在 div#one 中，我有 3 个 a 元素，因此我将执行 $('div#one').addClass ('三张图片');在 div#two 中，我有 2 个 a 元素，因此我将执行 $('div#two').addClass('two-img' ) 而在 div#third 中，我只有 1 个 a 元素，因此我将执行 $('div#third')。 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

我会选择这样的东西:

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