如何在 jQuery 中获取唯一项

how to get the unique items in jquery

本文关键字：获取 唯一 jQuery      更新时间：2023-09-26

我有如下所示的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>

我怎样才能根据LID获得LI项目的唯一文本。

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（去除前导空格和结尾空格）。只需更改以下内容：

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

您的标记无效，因为不允许为多个元素提供相同的 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; }

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

这是用于此目的的片段。

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