Collecting an array of element classes using jQuery

Question

Background: I am using ShuffleJS and when no results are returned on a filter, I want to display a message.

So I'm trying to loop through HTML generated by php and create an array of class names from children elements of a div. Then use 'inArray' to determine if any elements have the 'shuffle-item--visible'. If they don't, then print the message.

Here is my HTML example:

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

and example that is set to hidden:

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

It's evident that what hides/shows the element is the shuffle-item--visible/shuffle-item--hidden class.

I am using this bit of JS to try and create the array:

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

It's very messy and not returning anything like what I am looking for E.g. ["shuffle-item--hidden", "shuffle-item--hidden", "shuffle-item--visible"...]

Firstly, what am I doing wrong? and is there a better more simplified way of achieving the result? To determine if a jsshuffle category/filter pulls back null results?

Not clear what exactly it is you are trying to accomplish. Also a <div> has no value — charlietfl
– charlietfl, Commented Apr 7, 2017 at 1:30
Basically, trying to find out when shufflejs returns no results and put up an error message. I wanted to do this by collecting all the classes from the tiles every time a filter button is clicked and then evaluate if the array does not contain a 'visible' value at all and then run the error message. — Ryan Coolwebs
– Ryan Coolwebs, Commented Apr 7, 2017 at 2:22

HenryDev · Accepted Answer · 2017-04-07 01:08:27Z

1

Here's a working solution. Hope it helps!

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>

answered Apr 7, 2017 at 1:08

HenryDev

5,0136 gold badges31 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ryan Coolwebs Over a year ago

Thanks, tried your solution but the array pulled back a series of objects instead of strings carrying the class names/values.

Ryan Coolwebs Over a year ago

Can you put up a quick jsFiddle? I am running the JS inline straight after the elements are rendered onto the page.

HenryDev Over a year ago

@RyanCoolwebs no need to put jsFiddle, you can just click on the Run Code snippet button (Blue button) and you'll see my code working just fine :)

Ryan Coolwebs Over a year ago

Issue was where I put the script. I moved it up onto the button click action where the filter is actually performed. Works well now!

Collectives™ on Stack Overflow

Collecting an array of element classes using jQuery

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related