ループで作成した各コンテンツ<div>をslick-sliderを用いて動かしたいです。ループごとにスライダーを１つ作るイメージです

Question

実現したいこと

ページを開いたときに、各コンテンツごとに１スライダーを出力したいです。
例）
Title１
slick-slider<div1><div1><div1>・・・・webパーツ
Title２
slick-slider<div2><div2><div2>

発生している問題・分からないこと

上手く表示されるエリアとされないエリアがランダムで発生します。
slick-sliderが動いていないのでコード構成ができておらずそのエリアのwebパーツ<div>要素が縦に並んでしまいます。色々試しましたが、現状一番落ち着いているコードを記載いたしますので。
お手数おかけして申し訳ございませんがお力添えをお願いいたします。

該当のソースコード

  <?php
      $sections2 = [
          ['id2' => '01', 'templateId2' => '外部webパーツIDです', 'header2' => 'ヘッダー','comment2'=>'コメント'],
          ['id2' => '02', 'templateId2' => '外部webパーツIDです', 'header2' =>ヘッダー','comment2'=>'コメント],
          ['id2' => '03', 'templateId2' => '外部webパーツIDです', 'header2' =>ヘッダー','comment2'=>'コメント],
          ['id2' => '04' 'templateId2' => '外部webパーツIDです', 'header2' =>ヘッダー','comment2'=>'コメント],
          ['id2' => '05' 'templateId2' => '外部webパーツIDです', 'header2' =>ヘッダー','comment2'=>'コメント],
          ['id2' => '06' 'templateId2' => '外部webパーツIDです', 'header2' =>ヘッダー','comment2'=>'コメント],
          ['id2' => '07' 'templateId2' => '外部webパーツIDです', 'header2' =>ヘッダー','comment2'=>'コメント],
          ['id2' => '08' 'templateId2' => '外部webパーツIDです', 'header2' =>ヘッダー','comment2'=>'コメント],
          ['id2' => '09' 'templateId2' => '外部webパーツIDです', 'header2' =>ヘッダー','comment2'=>'コメント]
      ];
      foreach ($sections2 as $section2) {
          extract($section2);
        ?>
    <section class="lp__pickup l-section" id="link-n1-U<?= $id2 ?>">
        <div class="l-container"  id="link-n1-<?= $id2 ?>">
            <header class="lp__pickup-header heading__Lv2-wrap-center anime-fadeInBottom">
                <h1 class="heading__Lv1-main t-tCenter anime-splitStrFadeIn t-outline_b" data-splitdelay=".1"><?= ($header2); ?>の例</h1>
                <h2 class="heading__Lv3-main t-tCenter t-outline_b"><?= ($comment2); ?></h2>
            </header>
        </div>
        <div class="lp__pickup-list">
            <div class="porters__pickup" id="js-pickup-list">
                <script type="text/javascript" src="https://app-webparts-hrbc.porterscloud.com/po-b.js" data-template-id="<?= $templateId2 ?>"></script>
                <script type="porters/webparts"></script>
            </div>
    </section>
    <?php }?>

"use strict";
jQuery(function(i) {
    var o = !1,
        e = new MutationObserver(function(e) {
            if (0 == o && i(".porters__pickup .po-joblist > *").length) {
                i(".porters__pickup .po-joblist > *:not(.po-job-item),.po-header").remove();
                i(".porters__pickup .po-joblist.slick-initialized").slick("unslick");
                i(".porters__pickup .po-joblist").slick({
                    autoplay:true,
                    accessibility:true,
                    pauseOnFocus:true,
                    dots: !1,
                    arrows: !0,
                    appendArrows: i("#js-pickup-arrow"),
                    infinite: !0,
                    speed: 500,
                    variableWidth: !0,
                    slidesToScroll: 1,
                    centerMode: !0,
                    slidesToShow: 4
                });
                o = !0;
            }
        }),
        t = document.getElementById("js-pickup-list");
    e.observe(t, {
        childList: !0,
        subtree: !0,
        characterData: !0
    });
});

特になし

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

【検索でやったこと】
Googleで書かれていたループごとにIDを振り、それにjquaryを対応させる方法を試しました。
→webパーツの表示すらされなくなってしまいました。
【自分でやったこと】
jquaryの実行条件を緩和してみました。
いろいろな場所にwebパーツが散らばってしまいました。
条件に合致する要素が現れるたびにこのjquaryを実行するよう方法を試しました。
→webパーツの表示すらされなくなってしまいました。
f５を何回か押すとすべて正常な形で出力されることから、ぺージが開かれたときに５回くらいf5かける仕様も試しました。
→webパーツの表示すらされなくなってしまいました。

補足

WEBパーツは「porters Web Parts」を使っています。
仮想環境はXAMMP／WordPress内の１ページになります。

かなり悩んでいる所になりますので、ご尽力いただけますと大変助かります。
申し訳ございませんがよろしくお願いいたします。

Comments

[Lhankor_Mhy]

.po-joblist がHTMLに存在しませんが、これはWEBパーツの中に存在するのですか？

[Rin22209853]

はい、WEBパーツの中に.po-joblistが存在いたします。

[Lhankor_Mhy]

PHP から HTML が出力されたとき、id="js-pickup-list" が複数存在しませんか？　その辺りが原因ではないかと疑っています。

[Lhankor_Mhy]

上記補足依頼、手元で確認しました。やはり複数存在するようです。

[Rin22209853]

id="js-pickup-list"

[Rin22209853]

id="js-pickup-list" が複数存在いたします。
また本来作成しようとしてましたスライダーの矢印
<div class="l-container" id="js-pickup-arrow"></div>も同じものが何度も出てきました。

<div class="lp__pickup-list">
<div class="porters__pickup" id="js-pickup-list">
<script type="text/javascript" src="https://app-webparts-hrbc.porterscloud.com/po-b.js" data-
template-id="<?= $templateId2 ?>"></script>
<script type="porters/webparts"></script>
</div>
<div class="l-container" id="js-pickup-arrow">
</section>

[perfectibility]

回答には関係のないことですが失礼します。
タグにJavaとありますが、JavaとJavaScriptは別のプログラミング言語ですので関係ないタグではないでしょうか？

[Rin22209853]

ご連絡ありがとうございます。
タグ修正いたしました。
申し訳ございません！

Answer 1

#js-pickup-list が複数存在することが原因のひとつでしょうから、.porters__pickupをforEachで回してobserveするのはどうでしょうか。

当方では動作確認ができませんので、これだけで動くようになるかどうかはわからないです。

Comments

[Rin22209853]

試してみます…！
この度はお忙しいところご対応いただき誠にありがとうございました。
またお聞きすることもあるかと存じますがその時はよろしくお願いします。

[Rin22209853]

ご回答いただき誠にありがとうございました。
頂いた内容でコードを書き換えたらすべてスライダーが生成されるようになりました。
ここでかなり詰まっていたので本当にありがとうございました。
ベストアンサーとさせていただきます。
またご縁がありましたらご指導ご鞭撻のほど何卒よろしくお願い申し上げます。

以下変更後のコードになります。
===
"use strict";

jQuery(function($) {
var maxAttempts = 5;
var currentAttempt = 0;

function initializeSlider(portersPickup) {
var initialized = false;
var observer = new MutationObserver(function(mutationsList) {
mutationsList.forEach(function(mutation) {
if (mutation.type === 'childList' && mutation.addedNodes.length > 0 && !initialized) {
$(portersPickup).find(".po-joblist > *:not(.po-job-item), .po-header").remove();
$(portersPickup).find(".po-joblist.slick-initialized").slick("unslick");
$(portersPickup).find(".po-joblist").slick({
autoplay:true,
accessibility:true,
pauseOnFocus:true,
dots: false,
arrows: true,
appendArrows: $(portersPickup).find("#js-pickup-arrow"),
infinite: true,
speed: 500,
variableWidth: true,
slidesToScroll: 1,
centerMode: true,
slidesToShow: 4
});
initialized = true;
}
});
});

var observerOptions = { childList: true, subtree: true, characterData: true };
observer.observe(portersPickup, observerOptions);
}

function attemptInitialize() {
$(".porters__pickup").each(function() {
initializeSlider(this);
});

currentAttempt++;
if (currentAttempt < maxAttempts) {
setTimeout(attemptInitialize, 1000);
}
}

attemptInitialize();
});

[Rin22209853]

補足・sliderを一意にすることで改善されました。
<div id="js-pickup-list<?= $id2 ?>" class="porters__pickup slider<?= $id2 ?>">

■PHP
<?php
$sections2 = [
['id2' => '01', 'templateId2' => '外部webパーツIDです', 'header2' => 'ヘッダー','comment2'=>'コメント'],
['id2' => '02', 'templateId2' => '外部webパーツIDです', 'header2' =>ヘッダー','comment2'=>'コメント],
['id2' => '03', 'templateId2' => '外部webパーツIDです', 'header2' =>ヘッダー','comment2'=>'コメント],
['id2' => '04' 'templateId2' => '外部webパーツIDです', 'header2' =>ヘッダー','comment2'=>'コメント],
['id2' => '05' 'templateId2' => '外部webパーツIDです', 'header2' =>ヘッダー','comment2'=>'コメント],
['id2' => '06' 'templateId2' => '外部webパーツIDです', 'header2' =>ヘッダー','comment2'=>'コメント],
['id2' => '07' 'templateId2' => '外部webパーツIDです', 'header2' =>ヘッダー','comment2'=>'コメント],
['id2' => '08' 'templateId2' => '外部webパーツIDです', 'header2' =>ヘッダー','comment2'=>'コメント],
['id2' => '09' 'templateId2' => '外部webパーツIDです', 'header2' =>ヘッダー','comment2'=>'コメント]
];
foreach ($sections2 as $section2) {
extract($section2);
?>
<section class="lp__pickup l-section" id="link-n1-U<?= $id2 ?>">
<div class="l-container" id="link-n1-<?= $id2 ?>">
<header class="lp__pickup-header heading__Lv2-wrap-center anime-fadeInBottom">
<h1 class="heading__Lv1-main t-tCenter anime-splitStrFadeIn t-outline_b" data-splitdelay=".1"><?= ($header2); ?>の例</h1>
<h2 class="heading__Lv3-main t-tCenter t-outline_b"><?= ($comment2); ?></h2>
</header>
</div>
<div class="lp__pickup-list">
<div id="js-pickup-list<?= $id2 ?>" class="porters__pickup slider<?= $id2 ?>">
<script type="text/javascript" src="https://app-webparts-hrbc.porterscloud.com/po-b.js" data-template-id="<?= $templateId2 ?>"></script>
<script type="porters/webparts"></script>
</div>
</section>
<?php }?>

■js
"use strict";
jQuery(function($){
var jobDispEndFlag = false;
const config = {
childList: true,
subtree: true,
characterData: true
};
var observer1 = new MutationObserver(records => {
if(jobDispEndFlag == false && $('.slider01 .po-joblist > *').length){
$('.slider01 .po-joblist > *:not(.po-job-item),.po-header').remove();
$('.slider01 .po-joblist .slick-initialized').slick('unslick');
slickinitial01();
jobDispEndFlag = true;
}
});
const elem1 = document.getElementById('js-pickup-list01');
observer1.observe(elem1, config);

function slickinitial01(){
$('.slider01 .po-joblist').slick({
autoplay:true,
autoplaySpeed:3500,
arrows: true,
appendArrows: $('#js-pickup-arrow'),
infinite: true,
speed: 300,
variableWidth: true,
slidesToScroll: 1,
centerMode: true,
slidesToShow: 4,
});
}
});
"use strict";
jQuery(function($){
var jobDispEndFlag = false;
const config = {
childList: true,
subtree: true,
characterData: true
};
var observer1 = new MutationObserver(records => {
if(jobDispEndFlag == false && $('.slider02 .po-joblist > *').length){
$('.slider02 .po-joblist > *:not(.po-job-item),.po-header').remove();
$('.slider02 .po-joblist .slick-initialized').slick('unslick');
slickinitial02();
jobDispEndFlag = true;
}
});
const elem1 = document.getElementById('js-pickup-list02');
observer1.observe(elem1, config);

function slickinitial02(){
$('.slider02 .po-joblist').slick({
autoplay:true,
autoplaySpeed:3500,
arrows: true,
appendArrows: $('#js-pickup-arrow'),
infinite: true,
speed: 300,
variableWidth: true,
slidesToScroll: 1,
centerMode: true,
slidesToShow: 4,
});
}
});