javascript - FacetWP: jQuery でファセットの前後に HTML を追加する

Question

ファセットに折りたたみ要素を使用したいので、出力の前後に HTML を追加します。それを達成するために、私は次のコードを使用しています。

コードは当初、ファセットの前にラベルを追加し、オプションがない場合は非表示にしていました。コードを拡張して、ファセットの前後に HTML を追加しました。ラベルと同じように。うまく機能し<div>ますが、ファセットが開始する前に最初のものが閉じます。したがって、崩壊は機能しませんでした。

コードは次のとおりです。

<script>
    (function($) {
        $(document).on('facetwp-loaded', function() {
            $('.facetwp-facet').each(function() {
                var facet_name = $(this).attr('data-name');
                var facet_label = FWP.settings.labels[facet_name];
                if ( 'undefined' !== typeof FWP.settings.num_choices[facet_name] && FWP.settings.num_choices[facet_name] > 0 && $('.facet-label[data-for="' + facet_name + '"]').length < 1 ) {

                    // collapse button before
                    $(this).before('<a class="btn btn-primary" data-toggle="collapse" href="#collapse_facet_' + facet_name + '" role="button" aria-expanded="false" aria-controls="collapse_facet_' + facet_name + '">' + facet_label + '</a>');

                    // open collapse element
                    $(this).before('<div class="collapse" id="collapse_facet_' + facet_name + '">');

                    // label
                    $(this).before('<p class="h4 facet-label" data-for="' + facet_name + '">' + facet_label + '</p>');

                    // close collapse element
                    $(this).after('</div>');


                } else if ( 'undefined' !== typeof FWP.settings.num_choices[facet_name] && !FWP.settings.num_choices[facet_name] > 0 ) {
                    $('.facet-label[data-for="' + facet_name + '"]').remove();
                }
            });
        });
    })(jQuery);
</script>

何か間違っていることでも？たぶん、JS は最善の解決策ではありません。

また、ファセット HMTL を変更するための出力フックも見つけました: https://facetwp.com/documentation/developers/output/facetwp_facet_html/

しかし、それを使用する方法や、HTML を追加する必要がある場所がわかりません。またはそれが右フックの場合。