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项目的独特文本。

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

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

如何获取jquery中的唯一项

3 个答案: