CODEWITHSUNDEEP
jquery
Bugaloo
Bugaloo

Reputation: 33

jquery sort dom element

I have div-elements when i click on DIV, i add class "selected" of this DIV. DIVs with "selected" class goes to .each(). Can i sort this elements by last added?

for example if I selected 341 i want to get 341 here is my code

<!DOCTYPE html>
<html>
    <head>
        <style>.active{display: inline;margin:0 10px;border:1px solid #000;cursor: pointer;}</style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <div id="content"> 
            <div class="row">
                <div class="nred"></div><div class="active">1</div><div class="active">2</div><div class="active">3</div><div class="active">4</div><div class="active">5</div><div  class="active">6</div><div class="active">7</div><div class="active">8</div>
            </div>
            <div id="bileti"></div>
        </div>
<script>
    $(".row").hover(
        function () {
            $(this).children("div.active").toggleClass('bounce');
            $(this).children("div.nred").toggleClass('izbranred');
        }
    );

    $("div.active").click(function () {
        $(this).toggleClass('selected');
        document.getElementById("bileti").innerHTML="";

        $(".selected").each(function(){
            var place=$(this).html();
            document.getElementById("bileti").innerHTML+=place;
        });
    });
</script>

    </body>
</html>

Upvotes: 3

Views: 813

Answers (2)

Paul
Paul

Reputation: 141935

Instead of using $(".selected").each (which will reselect by class each time giving you the elements in DOM order), keep track of the selected divs in an array:

(function(){

    var selected = [];

    $("div.active").click(function(){
        var i = $.inArray(this, selected);

        if(i >= 0){
            // Already in array, so remove it
            $(this).removeClass('selected');
            selected.splice(i, 1);
        }else{
            // Not in array, so add it
            $(this).addClass('selected');
            selected.push(this);
        }

        document.getElementById("bileti").innerHTML = "";

        // Iterate through the array

        $(selected).each(function(){
             var place = $(this).html();
             document.getElementById("bileti").innerHTML += place;
        });
    });

})();

Note that you can also optimize the following:

$(selected).each(function(){
     var place = $(this).html();
     document.getElementById("bileti").innerHTML += place;
});

That code is quite slow if there are a lot of elements to loop through, since it keeps updating the DOM by appending to innerHTML. It will be a lot faster to just build up an HTML string and then place it in the DOM after the loop:

var places = "";
$(selected).each(function(){
     places += $(this).html();
});
document.getElementById("bileti").innerHTML = places;

You can then also remove the line:

document.getElementById("bileti").innerHTML = "";

If you make all those changes your entire script becomes:

$(".row").hover(
    function(){
        $(this).children("div.active").toggleClass('bounce');
        $(this).children("div.nred").toggleClass('izbranred');
    }
);

(function(){

    var selected = [];

    $("div.active").click(function(){
        var i = $.inArray(this, selected);

        if(i >= 0){
            // Already in array, so remove it
            $(this).removeClass('selected');
            selected.splice(i, 1);
        }else{
            // Not in array, so add it
            $(this).addClass('selected');
            selected.push(this);
        }

        var places = "";
        $(selected).each(function(){
             places += $(this).html();
        });
        document.getElementById("bileti").innerHTML = places;

    });

})();

JSFiddle Demo

Upvotes: 2

Ram
Ram

Reputation: 144739

Try this:

var place = '';
$(".selected").each(function(){
    place += this.innerHTML;
});
document.getElementById("bileti").innerHTML = place;

However your each method selects the elements according to their positions in the DOM, so results are always sorted like 134, you can append span elements and remove them if they don't have selected class. 

$("div.active").click(function() {
    $(this).toggleClass('selected');
    if ($(this).hasClass('selected')) {
        $("#bileti").append('<span>' + this.innerHTML + '</span>');
    } else {
        $("#bileti span:contains(" + this.innerHTML + ")").remove();
    }
});​

http://jsfiddle.net/MW2wH/

Upvotes: 2

Related Questions