how to get the unique items in jquery

Question

I have the html file like below:

<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>

how can i get the unique text of li items according to their liids.

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

Demo: http://jsfiddle.net/Ralt/Vz7ev/1/

You'll see that "Science" is not the same as " Science". You may want to use $.trim (which strips off leading and ending spaces) if that bothers you. Just change the following:

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

Answer 2

Your markup is invalid because you're not allowed to give the same id to more than one element.

Having said that, if your question is how to get a list of unique values from the content of the li elements:

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.

As an aside, setting the same inline style ( text-align: left; ) makes for ugly markup, and makes ongoing maintenance more trouble than it needs to be. I'd remove those and add that to your existing popupul class. Or if you can't change that class for some reason add this to your stylesheet:

#ultreecurri li { text-align: left; }

Answer 3

The markup contains so many duplicated ID so, it is not a valid Markup. Instead I suggest you to remove the duplicate element, thus having a unique element on an array.

Here is a snippet for this purpose.

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