How can i sort the list tag with JQuery?

Question

this is my HTML CODE : I want to sort my list with Jquery by clicking the "Sort" and after the input where input's class = "input1". How can I do that?

<p id ="test">Sort</p>

        <ul>
         <li>
            <input type="text" class ="input1" value="Attila">
            <div class="other">text here </div>
            <input type="text">
         </li>
         <li>
            <input type="text" class ="input1" value="Andrea">
            <div class="other">text here </div>
            <input type="text">
         </li>
         <li>
            <input type="text" class ="input1" value="Jimmy">
            <div class="other">text here </div>
            <input type="text">
         </li>
        </ul>

JQUERY Code :

$(document).ready(function () {
   $("#test").click(function(){
    ............
   });
});

Answer 1

I found a working solution now: http://jsfiddle.net/aDzU5/

You have to add this first: http://james.padolsey.com/javascript/sorting-elements-with-jquery/

and then you can simply use:

$(document).ready( function() {

    $("#test").on('click', function(){

        $('li').sortElements(function(a, b){
            console.log(a);
            return $(a).children('input.input1').val() > $(b).children('input.input1').val() ? 1 : -1;
        });
    });
}); 

P.S.: The Test-Button is from Sterling Graham's fiddle - you'll need to change it in your code ;)

Answer 2

Oh, I see there is already an answer. Even if mine is not that elegant and still has one bug I'll post it because maybe you could learn something about selectors and stuff ;)

Here is the fiddle: http://jsfiddle.net/9yvZE/

The problem is that the values aren't the concurrent one. Maybe if you add an eventlistener or use another method than html() it could work as expected:

$(document).ready(function () {

        function sortList() {
            var ul = $('#my_list');
            var vals = [];
            $('#my_list li input.input1').each(function (index) {
                vals.push($(this).val());
            });
            vals.sort();

            for (var i = 0; i <= vals.length; i++) {
                $('#my_list li input.input1').each(function () {
                    if (vals[i] == $(this).val()) {
                        if ($('#my_list li').eq(i).children('input.input1').val() !== vals[i]) {
                            var list_el1_index = $('#my_list li').index();
                            var list_el1 = $('#my_list li').eq(list_el1_index).html();
                            var list_el2 = $('#my_list li').eq(i).html();
                            $('#my_list li').eq(list_el1_index).html(list_el2);
                            $('#my_list li').eq(i).html(list_el1);
                        }
                    }
                });
            }
        }
        $('#test').click(function () {
            sortList();
        });
});

HTML:

<p id ="test">Sort</p>

<ul id="my_list">
 <li>
    <input type="text" class ="input1" value="Attila">
    <div class="other">text here </div>
    <input type="text">
 </li>
 <li>
    <input type="text" class ="input1" value="Andrea">
    <div class="other">text here </div>
    <input type="text">
 </li>
 <li>
    <input type="text" class ="input1" value="Jimmy">
    <div class="other">text here </div>
    <input type="text">
 </li>
</ul>

Answer 3

How I did this was to grab all of the inputs that you are sorting on. Then sort them by their value. And finally, remove the old elements from the ul and append each parent li from the sorted array to the ul. You can see it in action here.

function compare_inputs(a, b){
    var aName = a.value.toLowerCase();
    var bName = b.value.toLowerCase(); 
    return ((aName < bName) ? -1 : ((aName > bName) ? 1 : 0));
}

$(document).ready( function() {
    $("#test").on('click', function(){
        $('.input1').sort(compare_inputs);

        var name_list = $('#sortable');
        name_list.empty();

        $(list_elems).each(function (index, value){  
          name_list.append($(value).parent());   
        });
    })
}); 

Edit: I see you wanted to click on the paragraph to sort the list, so I've updated my answer.