Question

我有以下XML文档，我使用AJAX调用我的网站的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 内容的<{1}}元素数组？。如果您检查代码，您会看到有四个<category>元素：2 x DVR，1 x Alarms，1 x Bullet Cameras。

我只想获得<category>，<category>DVR</category>和<category>Alarms</category> （过滤重复的DVR类别）。

jQuery具有$.uniqueSort功能，可过滤掉重复的 DOM元素。

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

<category>Bullet Cameras</category>

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中作为列表插入 - 请参阅下面的演示：

＆＃13;

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>');
});

＆＃13;

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

＆＃13;

jQuery：过滤/获取/选择DOM元素的唯一内容

2 个答案: