jQuery: how to parse a
list?

Question

I have, for example, the following list:

<ul class="dropdown-menu pull-right" id="dropdown-menu">
    <li><a language-id="2" language-code="de" href="#">Allemand</a></li>
    <li><a language-id="9" language-code="en" href="#">Anglais</a></li>
    <li><a language-id="28" language-code="ca" href="#">Catalan</a></li>
    <li><a language-id="11" language-code="zh" href="#">Chinois</a></li>
    <li><a language-id="4" language-code="es" href="#">Espagnol</a></li>
    <li><a language-id="1" language-code="fr" href="#">Français</a></li>
    <li><a language-id="10" language-code="nl" href="#">Hollandais</a></li>
    <li><a language-id="21" language-code="it" href="#">Italien</a></li>
    <li><a language-id="12" language-code="ja" href="#">Japonais</a></li>
    <li><a language-id="7" language-code="pl" href="#">Polonais</a></li>
    <li><a language-id="5" language-code="pt" href="#">Portugais</a></li>
    <li><a language-id="6" language-code="ru" href="#">Russe</a></li>
    <li><a language-id="29" language-code="cs" href="#">Tchèque</a></li>
</ul>

I want to insert a new language in alphabetical order. So I know to use insertAfter() or insertBefore(), but I don't see how to parse the list to compare the new language with each item of the list. How can I do?

Regards,

You should use data attributes (`data-*`) instead of making up your own. And more importantly, what have you tried? You didn't post any JavaScript. — j08691, Feb 18 '16 at 17:08

score 1 · Answer 1 · edited May 23 '17 at 11:50

Take a look at this SO question: How to sort a list with jQuery.

Append the new items to the list (order doesn't matter at this point). When you're finished, use array sort to reorder the list.

var menu = $('.dropdown-menu');

menu.append('<li><a language-id="29" language-code="cs" href="#">Tchèque</a></li>');
menu.append('<li><a language-id="6" language-code="ru" href="#">Russe</a></li>');
menu.append('<li><a language-id="5" language-code="pt" href="#">Portugais</a></li>');
menu.append('<li><a language-id="4" language-code="es" href="#">Espagnol</a></li>');
menu.append('<li><a language-id="10" language-code="nl" href="#">Hollandais</a></li>');
menu.append('<li><a language-id="12" language-code="ja" href="#">Japonais</a></li>');
menu.append('<li><a language-id="11" language-code="zh" href="#">Chinois</a></li>');
menu.append('<li><a language-id="9" language-code="en" href="#">Anglais</a></li>');
menu.append('<li><a language-id="1" language-code="fr" href="#">Français</a></li>');
menu.append('<li><a language-id="21" language-code="it" href="#">Italien</a></li>');
menu.append('<li><a language-id="2" language-code="de" href="#">Allemand</a></li>');
menu.append('<li><a language-id="7" language-code="pl" href="#">Polonais</a></li>');
menu.append('<li><a language-id="28" language-code="ca" href="#">Catalan</a></li>');

$('.dropdown-menu li').sort(function(a, b) {
   return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
})
.appendTo('.dropdown-menu');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="dropdown-menu pull-right" id="dropdown-menu">
</ul>

very interesting solution so I give you +1 but the answer of Shahen Kosyan was ok for me. ;) — fralbo, Feb 18 '16 at 18:08

score 0 · Accepted Answer · answered Feb 18 '16 at 17:23

0

use .each()

$('#dropdown-menu').each(function () {
   // use $(this) as an li
});

Reference

answered Feb 18 '16 at 17:23

Shahen Kosyan

124
1
5

Good, this is what I wanted. – fralbo Feb 18 '16 at 17:53

jQuery: how to parse a list?

2 Answers2

jQuery: how to parse a
list?