javascript - jQuery .length 未将正确的类应用于 ACF Repeater 字段

Question

我想知道是否有人可以帮助我。我正在使用 ACF 重复器字段来创建动态行。然后，我使用 jQuery 为每一行分配一个唯一的类，例如:

$('.section').each(function(i) {
   $(this).addClass('section' + (i + 1));
});

这给了我类(class) <div class="row section section1">但是，然后我需要查看行内部并在每个图像周围添加一列，例如一个图像的 span_12 。

我为此编写的代码是:

$(function() {
    $('.section').each(function(i) {
        $(this).addClass('section' + (i + 1));

        if($('.section' + (i + 1)).children('.section-image').length === 1){
          $('.section-image').addClass('span_12');
        }
        else if($('.section' + (i + 1)).children('.section-image').length === 2){
          $('.section-image').addClass('span_6');
        }
        else if($('.section' + (i + 1)).children('.section-image').length === 3){
          $('.section-image').addClass('span_4');
        }
        else {
          $('.section' + (i + 1)).children('.section-image').addClass('span_3');
        }

        if(!$('.section-image').hasClass('span_12')){
          $('.section-image').last().addClass('col_last');
        }
    });
});

我遇到的问题是它将第一个 if (span_12) 和最后一个 else (span_3) 应用于带有图像的每个部分。例如，它显示为:

<div class="section-image col span_12 span_3">

我尝试过其他方法，但无法让它一次查看一个部分并正确应用这些类。

我想做的是，如果 jQuery 在第一个 .section 中查找并且有一个图像，则对其应用 .span_12 类，或者如果有两个图像，则对每个图像应用 .span_6 ，依此类推，例如

<div class="section-image col span_12">

或

<div class="section-image col span_6">
<div class="section-image col span_6 col_last">

如果有人能就此提供建议，我将非常感激。

感谢您花时间阅读我的帖子。

Answer 1

我明白了。将 span_ 应用于每个

$('.section-image').addClass(function(){
return ["none", "span_12", "span_6", "span_4", "span_3"]
   [$(this).parent().children('.section-image').length];
 });

感谢您的帮助!