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”的数据属性，以便稍后进行参考。另一个脚本是在list-elements中添加一个名为“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-tag的列表条目。最后看起来像这样：

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

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

检查所有FilterListElements，它们也有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();
            };
        });
    }
});
};

Answer 1

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。

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

1 个答案: