How to create an array from .each loop with jQuery

Question

How can I create an array from inside of the '.each loop' and use it outside of the loop?

My .each loop:

       // Loop through all but button with class .apply
        $('.profile-nav ul li a').not('.apply').each( function() {

            // if currently loop through element has .cur class
            if( $(this).hasClass('cur') ) {


                //Get the first class of the match element                  
                var ClassesToApply = $(this).prop('class').split(' ')[0];

            }   
            //How can I create an array from all ClassesToApply?


            //var arr = jQuery.makeArray(ClassesToApply);
            // This will create an array, but with one element only

        });

How can I create an array from all var = ClassesToApply?

And than how can I do something with this array? e.g

$( allClasses from an array as a selectors).doStuff();

You will get an array of strings. What do you want to do with such an array? jQuery methods are performed on arrays that contain DOM elements, not strings. — Šime Vidas, Oct 13 '11 at 11:18
I looking to use string as a selector to show/hide element with THE SAME classes in different div. Filtering - sort of. — Iladarsda, Oct 13 '11 at 11:23

score 28 · Accepted Answer · answered Oct 13 '11 at 11:12

If you declare a variable outside of the each, it will be accessible inside the each:

var yourArray = [];
$('.profile-nav ul li a').not('.apply').each(function() {
    if($(this).hasClass('cur')) {
        yourArray.push($(this).prop('class').split(' ')[0]);
    }
});
//Here, yourArray will contain the strings you require.

Although as others have shown, there are ways to shorten your code significantly.

score 12 · Answer 2 · answered Oct 17 '12 at 09:16

fxnReqValidation = function () {
        var InputTagArray = new Array;
        InputTagArray = document.getElementsByTagName("input");
        for (var iCnt = 1; iCnt <= InputTagArray.length; iCnt++) {
            if ((g_Json[InputTagArray[iCnt].name].required == true) && (InputTagArray[iCnt].value == "")) {
                $("#errormsg").text("please enter all required fields");
            }
            return false;
        }
    }

Šime Vidas · Answer 3 · 2011-10-13T12:36:24.177

9

You could do:

var arr = $( 'a.cur:not(.apply)', '.profile-nav' ).map( function () {
    return $( this ).prop( 'class' ).split( ' ' )[0];
}).get();

edited Oct 13 '11 at 12:36

answered Oct 13 '11 at 11:12

Šime Vidas

182,163
62
281
385

Great example! I never used '.map' before, I need to look into it. – Iladarsda Oct 13 '11 at 11:19
If OP want's an Array, don't forget to chain `.get()` or `.toArray()` after the `.map()`. – user113716 Oct 13 '11 at 12:28

Kir Kanos · Answer 4 · 2021-12-21T14:42:25.253

var arraySelectors = $('.profile-nav ul li a.cur:not(.apply)')
                        .toArray()
                        .map(e => '.' + Array.from(e.classList).join('.'));

This snippet is probably not the most elegant but it tries to accomodate to the objective the OP was describing.

I prefer not splitting a className because you never know how many consecutive spaces there is.

Exiting from the jQuery array and getting to a native array seems to be the best solution.

Array.from() is ES6 circa 2015
jQuery.toArray() appeared in jQuery 1.4

score 0 · Answer 5 · answered Oct 13 '11 at 11:12

0

var list = $(".profile-nav ul li a.cur:not(.apply)");

list.each(function(){
   // do your thing!
});

answered Oct 13 '11 at 11:12

BGerrissen

21,250
3
39
40

How to create an array from .each loop with jQuery

5 Answers5

Linked