sorting elements using jquery

Question

I have a div, #containerDiv, which contains elements related to users like first name, last name etc. in separate divs. I need to sort the contents of the container div based on the last name, first name etc. values.

On searching google the examples I got all are appending the sorted results and not changing the entire HTML being displayed. They are also not sorting by specific fields (first name, last name).

So please help me in sorting the entire content of #containerDiv based on specific fields and also displaying it.

The Page looks Like something as mentioned Below:

<div id="containerDiv">
    <div id="lName_1">dsaf</div><div id="fName_1">grad</div>
    <div id="lName_2">sdaf</div><div id="fName_2">radg</div>
    <div id="lName_3">asdf</div><div id="fName_3">drag</div>
    <div id="lName_4">fasd</div><div id="fName_4">gard</div>
    <div id="lName_5">dasf</div><div id="fName_5">grda</div>
    <div id="lName_6">asfd</div><div id="fName_6">drga</div>
</div>

On getting sorted by last name div values, the resulted structure of the container div should look like:

<div id="containerDiv">
    <div id="lName_3">asdf</div><div id="fName_3">drag</div>
    <div id="lName_6">asfd</div><div id="fName_6">drga</div>
    <div id="lName_5">dasf</div><div id="fName_5">grda</div>
    <div id="lName_1">dsaf</div><div id="fName_1">grad</div>
    <div id="lName_4">fasd</div><div id="fName_4">gard</div>
    <div id="lName_2">sdaf</div><div id="fName_2">radg</div>
</div>

Now I think you all can help me in a better way.

What does your html look like? Can we see what you have tried (sorting wise). This question is very vague... are your divs separated into 'rows' or are they just floating.. also if this is grid-like data, would a table not be more suited.. — rlemon
– rlemon, Commented Nov 21, 2011 at 13:15
I assume the HTML is being generated by a CMS/database of some sort and not static? In which case I'd suggest amending the order in the code which is providing you with the data. — Rory McCrossan
– Rory McCrossan, Commented Nov 21, 2011 at 13:16

island205 · Accepted Answer · 2011-11-21 13:33:30Z

1

this is a sample example: html:

<div id="containerDiv">
    <div>2</div>
    <div>3</div>
    <div>1</div>
</div>

js

  $(function() {
    var container, divs;
    divs = $("#containerDiv>div").clone();
    container = $("#containerDiv");
    divs.sort(function(divX, divY) {
      return divX.innerHTML > divY.innerHTML;
    });
    container.empty();
    divs.appendTo(container);
  });

you may set your divs.sort function param depend on your goal.

jsFiddle.

and a jQuery Plugin is suitable

edited Nov 21, 2011 at 13:33

answered Nov 21, 2011 at 13:28

island205

1,74017 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bas Slagter · Accepted Answer · 2011-11-21 13:14:17Z

0

I suggest you read the div values so you get an array of objects (persons for example) or just names and perform a sort operation on that. Than...output the result to the initial div (overwriting the default values).

answered Nov 21, 2011 at 13:14

Bas Slagter

9,9479 gold badges50 silver badges81 bronze badges

Comments

Royi Namir · Accepted Answer · 2011-11-21 13:14:36Z

I have built a jQuery sort function in which you can affect the sort field.

(it rebuilds the html by moving the row to another location).

function sortTableJquery()
 {
    var tbl =$("#tbl tr");
    var store = [];
    var sortElementIndex = parseFloat($.data(document.body, "sortElement"));

    for (var i = 0, len = $(tbl).length; i < len; i++)
    {
        var rowDom = $(tbl).eq(i);
        var rowData = $.trim($("td",$(rowDom)).eq(sortElementIndex).text());
          store.push([rowData, rowDom]);
    }
    store.sort(function (x, y)
    {
        if (x[0].toLowerCase() == y[0].toLowerCase()) return 0;
        if (x[0].toLowerCase() < y[0].toLowerCase()) return -1 * parseFloat($.data(document.body, "sortDir"));
        else return 1 * parseFloat($.data(document.body, "sortDir"));

    });
    for (var i = 0, len = store.length; i < len; i++)
    {
        $("#tbl").append(store[i][1]);
    }
    store = null;
 }

marcio · Accepted Answer · 2011-11-21 13:14:54Z

0

Every time I need to sort lists I use ListJs.

It's well documented, has good performance even for large lists and it's very lightweight (7KB, despite being library agnostic).

answered Nov 21, 2011 at 13:14

marcio

10.6k13 gold badges58 silver badges86 bronze badges

Collectives™ on Stack Overflow

sorting elements using jquery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related