Question

我有一些具有类模态和状态名称的div，所以它们看起来像这个类=“modal-Texas hide”。在德克萨斯州的阵列中，就像这个“US-TX”：{“location”：“Texas”}。

我试图首先使用模态类找到所有div，然后只拆分状态名称，然后匹配数组位置名称，然后构建一个只有“US-TX”或其他匹配的新数组基于位置。

可在此处找到完整代码

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

然后，一旦我有新数组就想使用那样的新数组

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();
        }
    },

但是stateHTML [code]将是NEWARRAY [code]

修改

我的模态HTML结构如下：

<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

我认为这应该可以满足您的需求：

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

正则表达式信用： ojovirtual

这是一个涉及多个部分的复杂问题。在第一个块中，代码使用jQuery以属性选择器[attribute^="value"]开头，以选择类modal-的元素。在此处，它使用.filter()组合删除modal-conent匹配项和.map()以将状态名称拉入数组。最后，调用$.unique以从数组中删除重复项。此时，我们可以在控制台中验证类包含：

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

接下来，代码使用双for循环遍历classes数组，并将该位置与location对象中对象内任何匹配的stateHTML属性相匹配。 stateHTML.hasOwnProperty(b)用于验证属性是否对象是唯一的，而不是基于构造函数，从而消除了对__proto__和其他不适用的此类属性的检查。 stateHTML[b].location值和classes[a]值都是小写的，作为额外的预防措施，以确保字符串匹配而不区分大小写。最后，property将添加到新对象中，并从stateHTML[a]复制值。

回显到控制台的最终结果是：

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

注意：最终输出中缺少US-TX对象是因为US-TX对象在stateHTML对象中被注释掉了

演示：JSFiddle。

编辑：

当您将小提琴移植到实际代码时，正则表达式出现错误。我已经更新了第一部分，以便在继续之前检查正则表达式匹配。这应该有希望消除错误：

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

在前面的示例中，代码假设您始终匹配。在此示例中，如果值匹配，则仅将值映射到新数组。如果发生错误或未找到匹配项，则跳过该值。

Answer 2

您可以迭代class以modal-开头的所有元素，并使用正则表达式来获取所需的数据：

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

jQuery如果div存在并匹配数组值然后创建新数组并使用

2 个答案: