jQuery的：过滤器/获取/选择

Question

我已经使用AJAX其中我打电话到我的网站的DOM下面的XML文档的DOM元素的独特的内容：

<product> 
    <title>DVR 4 CH</title> 
    <category>DVR</category> 
</product> 
<product> 
    <title>DVR 8 CH</title> 
    <category>DVR</category> 
</product> 
<product> 
    <title>Infrared PIR motion sensor</title> 
    <category>Alarms</category> 
</product> 
<product> 
    <title>Bullet Camera 1000 TVL</title> 
    <category>Bullet Cameras</category> 
</product> 

如何过滤/获取/选择具有独特HTML <category>元素的数组内容？。如果您查看代码，您会看到有四个<category>元素：2个DVR，1个警报，1个子弹头摄像机。

我想只有<category>DVR</category>，<category>Alarms</category>和<category>Bullet Cameras</category>（过滤重复的DVR类）。

jQuery有所述$.uniqueSort功能，该滤波器滤除重复DOM元素。

我需要的不是这样。我需要过滤那些内部HTML内容是唯一/不同的内容。下面是我使用的代码（加上AJAX），它显示在控制台中的四个要素，包括复制：

var request = $.ajax({ 
    url: "../../../resources/xml/lista-de-precios/common/prices_database.xml", 
    dataType: 'xml', 
    cache: 'false', 
    method: 'GET', 
    async: 'true' 
}); 
request.done(function() { 
    getAndUseCategoriesAndLinks(request); 
}); 

function getAndUseCategoriesAndLinks(xml) { 
    var xmlDoc = xml.responseXML, 
     xml = $(xmlDoc), 
     category = xml.find("category"); 

    var each_element_new = $(category).each(function() { 
     console.log($(this).text()); 
     $("ul.categories-list").append('<li><a href="#">' + $(this).text() + '</a></li>'); 
    }); 
} 

Answer 1

您可以创建文本字符串数组并删除重复，那么你就可以轻松地添加他们。

var responseXML = "<product> <title>DVR 4 CH</title> <category>DVR</category></product><product> <title>DVR 8 CH</title><category>DVR</category></product><product> <title>Infrared PIR motion sensor</title><category>Alarms</category></product><product><title>Bullet Camera 1000 TVL</title><category>Bullet Cameras</category></product>"; 
 

 
var xmlDoc = responseXML, 
 
    xml = $(xmlDoc), 
 
    category = xml.find("category").map(function() { 
 
    return this.textContent; 
 
    }); 
 

 
unique(category).forEach(function(element) { 
 
    console.log(element); 
 
    $("ul.categories-list").append('<li><a href="#">' + element + '</a></li>'); 
 
}); 
 

 
function unique(list) { 
 
    var result = []; 
 
    $.each(list, function(i, e) { 
 
    if ($.inArray(e, result) == -1) result.push(e); 
 
    }); 
 
    return result; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="categories-list"></ul>

Answer 2

您可以像这样从XML创建独特类别列表：

[ 
    "DVR", 
    "Alarms", 
    "Bullet Cameras" 
] 

创建设置了过滤类别和在HTML中插入一个列表 - 参见下面的演示：

var xml = `<product> 
 
    <title>DVR 4 CH</title> 
 
    <category>DVR</category> 
 
    </product> 
 
    <product> 
 
    <title>DVR 8 CH</title> 
 
    <category>DVR</category> 
 
    </product> 
 
    <product> 
 
    <title>Infrared PIR motion sensor</title> 
 
    <category>Alarms</category> 
 
    </product> 
 
    <product> 
 
    <title>Bullet Camera 1000 TVL</title> 
 
    <category>Bullet Cameras</category> 
 
    </product>`; 
 

 
var list = [...(new Set(
 
    // get array of categories 
 
    $(xml).find('category').map(function() { 
 
    return $(this).text(); 
 
    }).get() 
 
))]; 
 

 
list.forEach(function(e) { 
 
    $('.wrapper').append('<li>'+ e + '</li>'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="wrapper"></ul>