Question

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

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

这为我提供了类<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）和最后一个（span_3）应用于带有图像的每个部分。例如，它将其显示为：

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

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

我想要做的是，如果jQuery查看第一个.section并且有一个图像然后应用.span_12类，或者如果有两个图像然后将.span_6应用于每个，依此类推，例如< / p>

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

感谢您的帮助！

Answer 2

您尝试在有机会添加该课程之前引用$('.section' + (i + 1))。此外，在同一个函数中反复创建相同的jQuery对象通常是不好的做法，因为从DOM中获取该信息是一项昂贵的操作。而是将其分配给变量：var thisSection = $('.section' + (i + 1));。由于它位于.each()内，因此您只需使用$(this)。

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

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

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

jQuery .length没有将正确的类应用于ACF Repeater字段

2 个答案: