0

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

我如何根据它们的 liids 获取 li 项目的唯一文本。

4

3 回答 3

2 
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() );
于 2012-06-04T07:53:19.790 回答
1

您的标记无效，因为您不允许为多个元素提供相同的 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; }
于 2012-06-04T07:56:57.690 回答
0

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

这是一个用于此目的的片段。

var list = {};
$('li').each(function() {
    var id = $(this).attr('id');
    if (list[id])
        $(this).remove();
    else
        list[id] = $(this);
});
于 2012-06-04T08:07:17.957 回答