CODEWITHSUNDEEP
javascriptjquery
Ankur Mukherjee
Ankur Mukherjee

Reputation: 3867

sorting elements using jquery

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.

Upvotes: 1

Views: 618

Answers (4)

island205
island205

Reputation: 1740

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

Upvotes: 1

marcio
marcio

Reputation: 10512

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).

Upvotes: 0

Royi Namir
Royi Namir

Reputation: 148524

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;
 }

Upvotes: 0

Bas Slagter
Bas Slagter

Reputation: 9929

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).

Upvotes: 0

Related Questions