javascript - 通过解析 XML 通过多个过滤器过滤 UL

Question

现在，我正在开发我的第一个真正的编程项目，但是现在，我遇到了一个问题。我有一个无序列表，每个过滤条件都有一个列表项。看起来像这样:

<li data-xml-code="gefäße-vorhanden" class="FilterListElement">Gefäße Vorhanden</li>
<li data-xml-code="splintholz-farblich-abgesetzt" class="FilterListElement">Splintholz farblich vom Kernholz abgesetzt</li>

它们中的每一个都包含一个名为“data-xml-code”的数据属性，以便稍后引用。另一个脚本正在向列表元素添加一个名为“selected”的附加类，该类通过 CSS 突出显示它们。大约有 60 种不同的过滤条件，因此请参阅此代码作为示例。

我的 xml 结构如下所示:

<wood_data>
<wood id="fagus_sylvatica">
    <name lang="de">Rotbuche</name>
    <name lang="en">European beech</name>
    <scientific_name>Fagus sylvatica</scientific_name>

    <attributes>
        <attribute>gefäße-vorhanden</attribute>
        <attribute>splintholz-farblich-abgesetzt</attribute>
    </attributes>
</wood>

<wood id="some_tree">
 ...
</wood>

</wood_data>

还有第二个列表，它是直接根据 xml 文件中的名称标签构建的。正如您所期望的，它根据 xml 中树林的 id 标签创建列表条目。最后看起来像这样:

<li id="fagus_sylvatica" class="WoodListElement">European beech</li>

我问你的是如何在 jQuery 中构建一个函数，它执行以下操作:

• 检查所有具有 class="selected"的 FilterListElement，并从中获取“data-xml-code”属性
• 解析 xml，并隐藏 WoodList 中至少缺少一个选定过滤器标记的每个元素。

我的问题是，我找不到比较这两组不同值的方法。你能告诉我这是怎么做的吗？

最终解决方案:非常感谢 Shilly，我拿到了你的代码并从中学到了很多东西。将其与其他线程的一些输入相结合后，我想在这里展示最终的工作代码:

function advancedFilter (){
$(this).toggleClass("selected");

activeFilters = [];

$('li.selected[data-xml-code]').map(function() {
    activeFilters.push($(this).attr('data-xml-code'));
});



$.ajax({
    url: 'xml/wooddata.xml',
    type: 'get',
    dataType: 'xml',
    success: function(data) {
        $(data).find('wood').each(function (){

            var currentID = $(this).attr("id");
            var attr = $(this).find('attributes');
            //count = 0;
            found = [];


            attr.children().map(function(){
                found.push($(this).text());
            });


            var diff = $(activeFilters).not(found).get();


            if(diff!=0){
                $('.WoodListElement[id="' + currentID + '"]').slideUp();
            }else{
                $('.WoodListElement[id="' + currentID + '"]').slideDown();
            };
        });
    }
});
};

Answer 1

1) 获取 data-xml-code 选定的元素。类似于(我的 jquery 不是 100%，所以如果复制/粘贴请仔细检查):

var codes = $('li .FilterListElement .selected').map(function (el) {
    return el.getAttribute('data-xml-code');
});

2) 从 xml 中获取值。使用标签名称和节点值。

var xmlAttributes = function xmlAttributes( xml ) {
    var attr = xml.getElementsByTagName('attributes')[0],
        count,
        found = [];
    for (count = 0; count < attr.childNodes.length; count += 1) {
        found.push(attr.childNodes[count].nodeValue);
    }
    return found;
};

3) 您可以使用函数解析每个 xml 片段，获取 xml 具有的属性列表，并将其与我们从列表元素中提取的代码列表进行比较，这很简单。我建议将解析后的属性保存在某处，这样您只需解析 xml 一次。就个人而言，我通常在保存之前将传入的 xml 转换为 json，这样我可以更轻松地访问这些值，并且只需为每个记录解析一次 xml。