javascript - 使用 jQuery 收集元素类数组

Question

背景:我正在使用 ShuffleJS，当过滤器没有返回结果时，我想显示一条消息。

所以我尝试循环 php 生成的 HTML 并从 div 的子元素创建一个类名数组。然后使用“inArray”来确定是否有任何元素具有“shuffle-item--visible”。如果没有，则打印该消息。

这是我的 HTML 示例:

<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-xs-12 project-row shuffle-box shuffle-item shuffle-item--visible" data-order="0" data-categories="[[sef]]" data-tags="" style="position: absolute; top: 0px; left: 0px; visibility: visible; will-change: transform; opacity: 1; transform: translate(379px, 0px) scale(1); transition-duration: 250ms, 250ms; transition-timing-function: ease, ease; transition-property: transform, opacity;">
                <a class="rwp-site" href="http://research.qut.edu.au/digital-agriculture">
                    <figure class="project-box" style="background-image: url(&quot;http://127.0.0.1/wp-content/uploads/sites/3/2016/05/57143cf93c44d8d51d2a5b9d-800x800.jpg&quot;); min-height: 360px;">
                        <figcaption>
                            <div class="site-title">
                                <p>Digital Agriculture</p>
                            </div>
                        </figcaption>
                    </figure>
                </a>

以及设置为隐藏的示例:

<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-xs-12 project-row shuffle-box shuffle-item shuffle-item--visible" data-order="0" data-categories="[[cif]]" data-tags="" style="position: absolute; top: 0px; left: 0px; visibility: visible; will-change: transform; opacity: 1; transform: translate(759px, 0px) scale(1); transition-duration: 250ms, 250ms; transition-timing-function: ease, ease; transition-property: transform, opacity;">
                <a class="rwp-site" href="http://127.0.0.1/dmrc">
                    <figure class="project-box" style="background-image: url(&quot;http://127.0.0.1/wp-content/uploads/sites/5/2017/03/DMRC_2017_group-1-800x800.jpg&quot;); min-height: 360px;">
                        <figcaption>
                            <div class="site-title">
                                <p>Digital Media Research Centre</p>
                            </div>
                        </figcaption>
                    </figure>
                </a>
            </div>

很明显，隐藏/显示元素的是 shuffle-item--visible/shuffle-item--hidden 类。

我正在使用这段 JS 来尝试创建数组:

        var sitesArray = new Array();
        jQuery(".shuffle-item").each(function () {
            var siteStatus = jQuery(this).find('.shuffle-item--visible').map(function () {
                return this.value;
            }).get();
            array.push(siteStatus)
        })
        console.log(sitesArray);

它非常困惑并且没有返回任何像我正在寻找的东西[“shuffle-item--隐藏”、“shuffle-item--隐藏”、“shuffle-item--visible”...]

首先，我做错了什么？是否有更好、更简化的方法来实现结果？确定 jsshuffle 类别/过滤器是否返回空结果？

Answer 1

这是一个可行的解决方案。希望对您有帮助!

var arr = [];
    $(".shuffle-item").each(function () {
        if($(this).hasClass("shuffle-item--visible")){
            arr.push("shuffle-item--visible");
        }
    })
    console.log(arr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-xs-12 project-row shuffle-box shuffle-item shuffle-item--visible" data-order="0" data-categories="[[sef]]" data-tags="" style="position: absolute; top: 0px; left: 0px; visibility: visible; will-change: transform; opacity: 1; transform: translate(379px, 0px) scale(1); transition-duration: 250ms, 250ms; transition-timing-function: ease, ease; transition-property: transform, opacity;">
    <a class="rwp-site" href="http://research.qut.edu.au/digital-agriculture">
        <figure class="project-box" style="">
            <figcaption>
                <div class="site-title">
                    <p>Digital Agriculture</p>
                </div>
            </figcaption>
        </figure>
    </a>
</div>


<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-xs-12 project-row shuffle-box shuffle-item shuffle-item--visible" data-order="0" data-categories="[[sef]]" data-tags="" style="position: absolute; top: 0px; left: 0px; visibility: visible; will-change: transform; opacity: 1; transform: translate(379px, 0px) scale(1); transition-duration: 250ms, 250ms; transition-timing-function: ease, ease; transition-property: transform, opacity;">
    <a class="rwp-site" href="http://research.qut.edu.au/digital-agriculture">
        <figure class="project-box" style="">
            <figcaption>
                <div class="site-title">
                    <p>Digital Agriculture</p>
                </div>
            </figcaption>
        </figure>
    </a>
</div>