jQuery if div exists and matches array value then make new array and use

Question

I have some divs that have a class modal- and a state name so it they look like this class="modal-Texas hide". And in the array for Texas it is like this "US-TX": {"location": "Texas"}.

I am trying to find all divs first with the modal- class and split just the state name out and then match up to the array location name and then build a new array with only the "US-TX" or others that matched based on location.

Full code can be found here

http://jsfiddle.net/abennington/ymgkkuzL/225/

Then once i have the new array would like to use that new array like so

onRegionOver: function (event, code) {
        if (stateHTML[code]) {
            $('#jvectormap1_' + code).css('cursor', 'pointer');
        } else if (code) { //if a state is not specified in var stateRedirects then prevent default
            event.preventDefault();
        }
    },

But the stateHTML[code] would be the NEWARRAY[code]

EDIT:

My modal HTML is structured like:

<div class="modal-California hide">
    <div class="modal-content">
        <div class="col-md-6">
            <img alt="" src="healthplanalliance.org/assnfe/images/Adventist.jpg"; />
            <br>
            <strong>
                <a href="/assnfe/cv.asp?ID=">Adventist Health Plan</a>
            </strong>
            <br> Roseville, California United States of America
            <br> Telephone: 
            <br> Local Time : 
        </div>
    </div>
</div>

Answer 1

I think this should get you what you want:

var classes = $.unique(
    $.map(
        $('div[class^="modal-"]')
            .filter(function (idx) {
                return !$(this).hasClass('modal-conent');
            }),
        function (val, idx) {
            return $(val).attr('class').match(/modal-([\w\s]+) hide/)[1]; 
        })
    );

console.log(classes);

var newArray = {};

for(var a in classes) {
    for(var b in stateHTML) {
        if(stateHTML.hasOwnProperty(b)) {
            if(stateHTML[b].location.toLowerCase() === classes[a].toLowerCase()) {
                newArray[b] = stateHTML[b];    
            }
        }
    }   
}

console.log(newArray);

Regex Credit: ojovirtual

This was a complex question that involved multiple parts. In the first block, the code is using the jQuery begins with attribute selector [attribute^="value"] to select the elements with a class of modal-. From here, it uses a combination of .filter() to remove the modal-conent matches and .map() to pull the state names into an array. Finally, $.unique is called to remove the duplicates from the array. At this point, we can verify in the console that classes contains:

[
    "Texas",
    "California",
    "New Mexico",
    "New York"
]

Next, the code uses a double for loop to loop through the classes array and match the location to any matching location property within an object in the stateHTML object. stateHTML.hasOwnProperty(b) is used to verify that the property is unique to the object and not based off the constructor, thereby eliminating the check of __proto__ and other such properties that don't apply. Both the stateHTML[b].location value and the classes[a] value are lowercased as an extra precaution to ensure the strings matched without case sensitivity. Finally, the property is added to the new object and the value copied from stateHTML[a].

The final result as echoed to the console is:

{
    US-CA: {
        location: "California"
    },
    US-NM: {
        location: "New Mexico"
    },
    US-NY: {
        location: "New York"
    }
}

Note: The absence of the US-TX object in your final output is due to the fact that the US-TX object is commented out in the stateHTML object.

Demo: JSFiddle.

EDIT:

There appears to be an error with the regex when you ported the fiddle to your actual code. I've updated the first part to check for a regex match before continuing. This should hopefully eliminate the error:

var classes = $.unique(
    $.map(
        $('div[class^="modal-"]')
            .filter(function (idx) {
                return !$(this).hasClass('modal-conent');
            }),
        function (val, idx) {
            var matches = $(val).attr('class').match(/modal-([\w\s]+) hide/);
            if(matches && matches.length === 2) {
                return matches[1];
            } 
        })
    );

In the previous example, the code was assuming you would always have a match. In this example, the value is only mapped to the new array if the value matches. If an error occurs or no match is found, the value is skipped.

Answer 2

You can iterate over all the elements whose class starts with modal- and use regular expressions to get the desired data:

var states=[];
$("div[class^=modal]").each(function(){
    if (state = $(this).attr("class").match(/modal\-([\w\s]+) hide/))        
    {
        states.push(state[1]);
    }
});
states=$.unique(states); //remove duplicates