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

Filtering an UL by multiple filters by parsing XML

本文关键字：过滤器 UL 过滤 XML      更新时间：2023-09-26

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

<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中构建一个函数，它做以下事情:

  • 检查所有的filterlistelement，也有class="selected"，并从他们获得"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();
            };
        });
    }
});
};

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

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

2)从xml中获取值。使用标签名和nodevalue 

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一次。

相关文章：