2012-06-04 29 views
0

唯一项目我有html文件,如下图所示:如何让jQuery中

<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得到的李项独特的文本。

+1

这HTML格式不正确。 ID不能重复,否则jQuery/js会表现异常。 –

回答

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()); 
1

您的标记无效,因为您不允许将相同的标识提供给多个元素。

话虽如此,如果你的问题是如何从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; } 
+0

当然,你不需要两个变量。如果你正在过滤workingObj,并且只有在var不存在的情况下才加入它,那么它将只包含每个唯一值中的一个,否。 –

+0

过度工程? :-)只需使用'$ .inArray'就足够了,不是吗? :-) –

+0

@LiamBailey - 'workingObj'可以避免在每次迭代'.each()'时在数组上使用'.indexOf()'。据我所知,查找对象中的属性效率更高,而且这种方式在旧式浏览器中不起作用,这些浏览器不支持数组上的'.indexOf()'(IE <9)。 – nnnnnn

0

的标记包含了许多重复ID所以,这不是一个有效的标记。相反,我建议你删除重复的元素,因此在数组上有一个唯一的元素。

这是一个为此目的的代码片段。

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