如何在jquery中获取唯一项

Question

我有如下的html文件：

<div id="ultreecurri" style="float:left;">
<ul>

<li id="li1" class="popupul" style="text-align: left;">International</li>
<li id="li10" class="popupul" style="text-align: left;">Science</li>
<li id="li332" class="popupul" style="text-align: left;">Physics</li>
<li id="li2" class="popupul" style="text-align: left;">Africa</li>
<li id="li3" class="popupul" style="text-align: left;">Asia</li>
<li id="li5" class="popupul" style="text-align: left;">Caribbean</li>
<li id="li8" class="popupul" style="text-align: left;">North America</li>
<li id="li9" class="popupul" style="text-align: left;">South America</li>
<li id="li1" class="popupul" style="text-align: left;">International</li>
<li id="li10" class="popupul" style="text-align: left;"> Science</li>
<li id="li332" class="popupul" style="text-align: left;">Physics</li>
<li id="li2" class="popupul" style="text-align: left;">Africa</li>
<li id="li3" class="popupul" style="text-align: left;">Asia</li>
<li id="li5" class="popupul" style="text-align: left;">Caribbean</li>
<li id="li8" class="popupul" style="text-align: left;">North America</li>
<li id="li9" class="popupul" style="text-align: left;">South America</li>
 </ul>
</div>

我如何才能根据li项的id获得其唯一文本。

Answer 1

var items = [],
    txt;
$( '#ultreecurri li' ).each( function() {
    // Cache the text to avoid retrieving twice the same property
    txt = $( this ).text();

    // If the text isn't in the array, add it
    if ( $.inArray( txt, items ) === -1 ) {
        items.push( txt );
    }
} );
console.log( items );​ // Array of unique values

演示： http ： //jsfiddle.net/Ralt/Vz7ev/1/

您会看到“科学”与“科学”不同。 如果这会让您感到困扰，则可能需要使用$.trim （除去$.trim和结尾的空格）。 只需更改以下内容：

// Replace this:
txt = $( this ).text();
// With this:
txt = $.trim( $( this ).text() );

Answer 2

您的标记无效，因为不允许您向多个元素提供相同的ID。

话虽如此，如果您的问题是如何从li元素的内容中获取唯一值列表：

var workingObj = {},
    uniqueVals = [];

$("#ultreecurri li").each(function() {
   var val = $(this).html();
   if (!(val in workingObj)){
      workingObj[val] = true;
      uniqueVals.push(val);
   }
});

// uniqueVals array now contains one of each unique value.

顺便说一句，设置相同的内联样式（ text-align: left; ）会带来难看的标记，并使正在进行的维护比需要的麻烦更多。 我将删除它们并将其添加到您现有的popupul类中。 或者，如果由于某种原因您无法更改该类，请将其添加到样式表中：

#ultreecurri li { text-align: left; }

Answer 3

标记包含太多重复的ID因此它不是有效的标记。 相反，我建议您删除重复的元素，从而在数组上具有唯一的元素。

这是为此目的的摘要。

var list = {};
$('li').each(function() {
    var id = $(this).attr('id');
    if (list[id])
        $(this).remove();
    else
        list[id] = $(this);
});