如何在每 4 次使用 Algolia 后添加一个 clearfix div？

Question

我们正在尝试使用 Algolia 实现即时搜索。它就像一个魅力。唯一的事情是我们想在每 4 次点击后添加一个 clearfix div。现在是

<div data-reactroot="" class="ais-hits">

    <div class="ais-hits--item"></div>
    <div class="ais-hits--item"></div>
    <div class="ais-hits--item"></div>
    <div class="ais-hits--item"></div>
    <div class="ais-hits--item"></div>

</div>

我希望每 4 个结果之后有一个 clearfix div，如下所示：

<div data-reactroot="" class="ais-hits">

    <div class="ais-hits--item"></div>
    <div class="ais-hits--item"></div>
    <div class="ais-hits--item"></div>
    <div class="ais-hits--item"></div><div class="clearfix"></div>
    <div class="ais-hits--item"></div>

</div>

这是生成点击小部件的代码

search.addWidget(
    instantsearch.widgets.hits({
        container: '#booksearch',
        templates: {
            item: getTemplate('result')
        },
        cssClasses: {
            item: 'col-lg-3 col-md-3 col-sm-3'
        },
        hitsPerPage: 12
    })
);

search.start();

感谢您抽出宝贵时间阅读本文。

Answer 1

InstantSearch 小部件不提供该功能。

但是，您可以编写自己的 JS 脚本，在 HTML 代码的呈现（即生成）之后添加 div。为此，只需等待render 事件被触发。更多详情请查看Events section of the InstantSearch documentation。