title: How to compare two UTF-8 strings which contain diacritic characters
body: <p>I want to add an element like this <a href="http://jsfiddle.net/shwbnefe/" rel="nofollow">fiddle</a> but I have a problem to compare my strings when a string has a UTF-8 character because <code>"é" is &gt; at all basics letters</code>.</p>
  
  <pre><code>&lt;ol class="ingredientList"&gt;
      &lt;li class="ingredient"&gt;Apples&lt;/li&gt;
      &lt;li class="ingredient"&gt;Carrots&lt;/li&gt;
      &lt;li class="ingredient"&gt;Clams&lt;/li&gt;
      &lt;li class="ingredient"&gt;Oysters&lt;/li&gt;
      &lt;li class="ingredient"&gt;Wheat&lt;/li&gt;
  &lt;/ol&gt;
  &lt;ol class="ingredientList"&gt;
      &lt;li class="ingredient"&gt;Barley&lt;/li&gt;
      &lt;li class="ingredient"&gt;éggs&lt;/li&gt;
      &lt;li class="ingredient"&gt;Millet&lt;/li&gt;
      &lt;li class="ingredient"&gt;Oranges&lt;/li&gt;
      &lt;li class="ingredient"&gt;Olives&lt;/li&gt;
  &lt;/ol&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>$(".ingredient").click(function() {
      var element = $(this);
      var added = false;
      var targetList = $(this).parent().siblings(".ingredientList")[0];
      $(this).fadeOut("fast", function() {
          $(".ingredient", targetList).each(function() {
              if ($(this).text() &gt; $(element).text()) {
                  $(element).insertBefore($(this)).fadeIn("fast");
                  added = true;
                  return false;
              }
          });
          if (!added) $(element).appendTo($(targetList)).fadeIn("fast");
      });
  });
  </code></pre>
  
  <p>Do you have any solutions to fix that ?</p>