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>