Jquery 如何将多个数据属性关键字匹配项从单独的html文档附加到列表中

我试图创建一个简单的脚本，根据数据属性关键字匹配将另一个文档中的列表项加载到div中

我在一个单独的文档中有以下html（relateds.html）：

下面的脚本用于迭代上面的列表，如果它在数据相关属性中找到与目标div的相同属性中的任何关键字相匹配的关键字，则获取该li并将其附加到目标ul。一旦找到最多三个匹配项，它也应该停止查找

$(window).load(function () {
    FetchRelatedData(3);
});

    function FetchRelatedData(max) {

        //Fetch the relateds.html
        $.get("relateds.html", function (data) {

            //Find all list items with a related regarding attribute.
            var relateds = $(data).find("[data-related*='" + $("#relatedStories").data("related") + "']");
            console.log(relateds);


            $.each(relateds, function (i, a) {
                //append each related item to the .relatedStories section.
               $("#relatedStories").append("<li>" + $(a).html() + "</li>");
            });

            if (i >= max) { return false; }


        }, "html");
}

$（窗口）。加载（函数（）{
获取相关数据（3）；
});
函数FetchRelatedData（最大值）{
//获取relateds.html文件
$.get（“relateds.html”，函数（数据）{
//查找具有相关属性的所有列表项。
var relateds=$（数据）。查找（“[数据相关*='”+$（“#relatedStories”）。数据（“相关”）+”]；
控制台日志（相关）；
$。每个（相关，功能（i，a）{
//将每个相关项追加到.relatedStories部分。
$（“#relatedStories”）.append（“
”+$（a.html（）+”
”）；
});
如果（i>=max）{return false；}
}，“html”）；
}

这种方法很有效，但似乎只使用一个关键字，或者在一个列表项中使用多个关键字。当多个关键字匹配多个列表项的相关数据（例如，data About=“primo airports”）时，列表将显示为空。此外，我在此处未能定义I，并且最大部分不起作用

如果现在还不清楚的话，我完全是一个JQuery磨砂工。这是一次尝试，试图改编一个开发人员在以前的项目中为我编写的类似脚本。坦率地说，我很惊讶它居然能这么好地工作

有没有一种方法可以通过跨列表项的多个匹配来实现这一点？我在定义I时哪里出错了

---

这里的半工作示例是我提出的。它支持#relatedStories上的任意数量的“相关”关键字，并且正在寻找以逗号分隔的关键字。我还从window.load切换到document.ready，因为在这种情况下它会更快一些

$(document).ready(function(){
    FetchRelatedData(3);
})

function FetchRelatedData(max) {

    //Fetch the relateds.html
    $.get("relateds.html", function (data) {
        //get the keywords to match
        var keysToMatch = $('#relatedStories').attr('related').split(',');

        //set up counter
        var counter = 0;

        //loop through the list items
        $(data).find('li').each(function(index, elem) {
            // return if counter is >= max
            if (counter >= max) {
                return;
            }
            // get the element's keywords
            var elemKeys = $(elem).attr('data-related');

            // loop through keysToMatch
            var match = false;
            $.each(keysToMatch, function(index, key) {
                // if the key matches any of the element's keywords, set match to true
                if (elemKeys.match(key) !== null) {
                    match = true;
                }
            });
            // if theres a match, append the element's contents
            // to the page and increment the counter
            if (match === true) {
                $("#relatedStories").append("<li>" + $(elem).html() + "</li>");
                counter++;
            }
        })
    }, "html");

$（文档）.ready（函数（）{
获取相关数据（3）；
})
函数FetchRelatedData（最大值）{
//获取relateds.html文件
$.get（“relateds.html”，函数（数据）{
//获取要匹配的关键字
var keysToMatch=$（'relatedStories'）.attr（'related'）.split（'，'）；
//设置柜台
var计数器=0；
//循环浏览列表项
$（数据）。查找（'li'）。每个（函数（索引，元素）{
//如果计数器大于等于最大值，则返回
如果（计数器>=最大值）{
回来
}
//获取元素的关键字
var elemKeys=$（elem.attr（‘数据相关’）；
//循环密钥匹配
var匹配=假；
$.each（密钥匹配、函数（索引、键）{
//如果键与元素的任何关键字匹配，请将match设置为true
if（elemKeys.match（key）！==null）{
匹配=真；
}
});
//如果存在匹配项，则追加元素的内容
//转到页面并递增计数器
如果（匹配===真）{
$（“#relatedStories”）.append（“
”+$（elem.html（）+”
”）；
计数器++；
}
})
}，“html”）；

---

}

首先，这抛出了一个类型错误：

“未定义”不是一个对象（计算“$”（“#relatedStories”）.attr（'related'）.split'）

查看原始代码，我看到您在使用.attr（）的地方使用了.data（），切换此选项可能会修复它，具体取决于您附加到带有.data（）的#relatedStories的数据的方式已格式化，但随后我将

.attr（'related'）

更改为

.attr（'data-related'））

，它开始成为头条新闻。唯一的问题是它仍然没有处理多个关键字，似乎…当我插入

ladot primo

，它应该匹配前两个列表项时，列表变成空的，与最初的问题类似。

$(document).ready(function(){
    FetchRelatedData(3);
})

function FetchRelatedData(max) {

    //Fetch the relateds.html
    $.get("relateds.html", function (data) {
        //get the keywords to match
        var keysToMatch = $('#relatedStories').attr('related').split(',');

        //set up counter
        var counter = 0;

        //loop through the list items
        $(data).find('li').each(function(index, elem) {
            // return if counter is >= max
            if (counter >= max) {
                return;
            }
            // get the element's keywords
            var elemKeys = $(elem).attr('data-related');

            // loop through keysToMatch
            var match = false;
            $.each(keysToMatch, function(index, key) {
                // if the key matches any of the element's keywords, set match to true
                if (elemKeys.match(key) !== null) {
                    match = true;
                }
            });
            // if theres a match, append the element's contents
            // to the page and increment the counter
            if (match === true) {
                $("#relatedStories").append("<li>" + $(elem).html() + "</li>");
                counter++;
            }
        })
    }, "html");