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 - 隐藏类。

我正在使用这个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 - hidden”，“shuffle-item - hidden”，“shuffle-item - visible”......]

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

Answer 1

这是一个有效的解决方案。希望它有所帮助！

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用jQuery收集元素类数组

1 个答案: