Question

我的目标是根据位置的数据集对页面上的元素进行分组。内容已经在页面上呈现，我希望在那里举行的事件上方的每个唯一位置都有一个Location标题。页面的结构将是Class Name＆gt;位置＆gt;上课时间

我正在做一些.each（）循环试图找到我需要的东西，但我认为应该是第一个每个循环的单独运行的值都被组合在一起。问题是，每个循环仍然运行多次。

$('.class-Info').each(function () 
{
    var className = $("h2").text();
    var eventLocations = [];
    $('.scheduledClass').each(function (index) 
    {
        eventLocations[index] = $(this).data("location");
    }); 

    var key = "";
    var uniqueLocations = [];
    $(eventLocations).each(function (index, location)
    {
        if (key !== eventLocations[index])
        {
            key = eventLocations[index];
            uniqueLocations.push(eventLocations[index]);
        }
     });

     console.log ("For " + className + " the locations are " + uniqueLocations);

});

这是我的代码。我希望我的问题有道理。看看控制台，看看我得到的结果。

http://jsfiddle.net/qnpr9fbh/5/

Answer 1

我想我明白你想要什么。

http://jsfiddle.net/qnpr9fbh/7/

如果您更新第一个每个循环（添加$(this).find），它将查找当前.scheduledClass中存在的.class-Info个元素。之前，它只是在寻找所有这些。这导致了不同的，看似合适的控制台输出。

$(this).find('.scheduledClass').each(function (index) {
    eventLocations[index] = $(this).data("location");
});

// Edit: Also make sure you select the correct "h2" by adding the $(this).find()
var className = $(this).find("h2").text();

控制台输出：

对于DocuSign管理员帐户后勤培训创建Docusign   数字工作流程：模板位置为位置TBD

用于创建Docusign数字工作流程：位置所在的模板   测试1，威利斯大厦，位置TBD

那是否符合您的要求？

jQuery有一些方便的功能，可以让你的代码变得更小更清晰：

$('.class-Info').each(function () {
    var className = $(this).find("h2").text(),
        eventLocations = $.map($(this).find('.scheduledClass'), function (elem) {
            return $(elem).data("location");
        }),
        uniqueLocations = $.unique(eventLocations.slice());

     console.log ("For " + className + " the locations are " + uniqueLocations);
});

.map() - 将循环选定元素，并从函数返回的项目中构建数组。
.unique() - 将减少jQuery元素的数组或列表，并将其减少为仅包含唯一值的数组。
Javascript Array.slice() - 我在eventLocations数组上调用它，因为.slice()将克隆该数组。必要，因为.unique()将修改它接收的数组。所以只需给它一份副本，原件就不会被修改。

jquery .each（）在每次运行中梳理所有值

1 个答案: