如何使用jQuery选择具有唯一文本内容的XML节点？

I'm attempting to pull a list of unique text entries from an XML document "the jQuery way" and am hitting a wall.

我试图从XML文档“jQuery方式”中提取一个唯一的文本条目列表,并且正在进行攻击。

From this XML:

从这个XML:

<items>
  <item>
    <categories>
      <cat>Category 1</cat>
      <cat>Category 2</cat>
    </categories>
  </item>
  <item>
     <categories>
      <cat>Category 2</cat>
      <cat>Category 3</cat>
  </item>
 </items>

I'd like to generate a select list like:

我想生成一个选择列表,如:

<select>
 <option>Category 1</option>
 <option>Category 2</option>
 <option>Category 3</option>
</select>

So far all of my attempts produce a duplicate "Category 2" option node. I attempted to make use of the $.unique() method, but the results make me think it's only comparing the node name, not the text content. Here is my latest hackery that does not work:

到目前为止,我的所有尝试都产生了重复的“类别2”选项节点。我试图使用$ .unique()方法,但结果让我觉得它只是比较节点名称,而不是文本内容。这是我最新的hackery不起作用:

var filters = $("cat",xmldoc);
filters = $.unique(filters);
$(filters).each(function()
{
    $("select").append("<option>" + $(this).text() + "</option>");
});

I can think of a number of standard javascript tricks to make this happen, but am hoping there's a nice, elegant jQuery way to pull this off.

我可以想到一些标准的javascript技巧来实现这一点,但我希望有一个漂亮,优雅的jQuery方法来实现这一目标。

Any tips or tricks would be greatly appreciated.

任何提示或技巧将不胜感激。

Thanks!

1 个解决方案

#1

The cat elements are not duplicates just because they have the same text content. They're still elements with their own, different identity, and consequently unique will not remove them.

cat元素不是重复的,因为它们具有相同的文本内容。它们仍然是具有自己的不同身份的元素,因此独特的不会删除它们。

You'll have to read the text contents into an array instead, and then remove duplicates from the Array-of-String.

您必须将文本内容读入数组,然后从Array-of-String中删除重复项。

Unfortunately, you also can't use unique afterwards on the Array-of-String, because it only supports DOM element items.

不幸的是,你也不能在String-of-String上使用unique,因为它只支持DOM元素项。

I'd just do the dupe removal when building the list:

我只是在构建列表时删除了欺骗:

var cats= [];
$('cat', xmldoc).each(function() {
    var text= $(this).text();
    if ($.inArray(text, cats)===-1)
        cats.push(text);
});

Then add each option to the select:

然后将每个选项添加到选择:

$.each(cats, function() {
    $('select').append($('<option>').attr('val', this).attr('text', this));
});

The option text needs to be set using attr and not by passing in the whole element as HTML. When you make HTML from text, you have to HTML-escape any text strings you are injecting into the HTML, otherwise you'll have potential cross-site-scripting security holes.

选项文本需要使用attr设置,而不是通过将整个元素作为HTML传递。当您从文本中创建HTML时,您必须将HTML注释到HTML注入任何文本字符串,否则您将有潜在的跨站点脚本安全漏洞。

#1