« previous next »
Pages: [1]   Go Down

Author Topic: [jquery] Alphabetical sort  (Read 418 times)

Offline Chris

  • Game Owner
  • Level 35
  • *
  • Posts: 2,217
  • Reputation: +28/-1
    • View Profile
[jquery] Alphabetical sort
« on: January 31, 2012, 08:20:59 AM »
Code: [Select]
<img ...> NAME_1 <i>something else</i><BR>
<img ...> NAME_2 <i>something else</i><BR>
(I can rewrite it to use tables, insert NAME inside a tag or whatever, it's not a problem)

I want to sort it alphabetically using jQuery. I know there are nice sorting plugins but I need it only in one place and only the most primitive sorting of a list, so maybe it can be done with a few lines of code?
Logged

Offline CygnusX

  • Level 24
  • *
  • Posts: 303
  • Reputation: +3/-2
    • View Profile
    • Lords of Midnight
Re: [jquery] Alphabetical sort
« Reply #1 on: January 31, 2012, 09:04:08 AM »
<script type="text/javascript">

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();

for (var j = 0; j < fruits.length; j++) {
    alert(fruits[j]);
    //Do something
}

</script>

like this?
Logged

Offline Chris

  • Game Owner
  • Level 35
  • *
  • Posts: 2,217
  • Reputation: +28/-1
    • View Profile
Re: [jquery] Alphabetical sort
« Reply #2 on: January 31, 2012, 09:28:27 AM »
Well, I guess it does what is required but... I would rather go for a jQuery solution (changing the HTML that was already rendered), it is not depending on JS being enabled this way (if no JS present it will just display it unsorted, not a big deal).
Logged

Offline Barrikor

  • Level 21
  • *
  • Posts: 248
  • Reputation: +3/-0
    • View Profile
Re: [jquery] Alphabetical sort
« Reply #3 on: January 31, 2012, 02:47:18 PM »
For reordering, what about jQuery's insertAfter ?


Code: [Select]
<html>
<head>
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript">
$(
function()
{
$("#p1").insertAfter("#p2");
}
);

</script>
</head>
<body>
<p id="p1">Hello,</p>
<p id="p2">World!</p>
</body>
</html>
Displays:
Code: [Select]
World!
Hello,

Just combine that with js's sort() that CygnusX mentioned :)
Logged
Projects: Pith Framework (at 0.5), CactusGUI (at 0.3)

Offline Chris

  • Game Owner
  • Level 35
  • *
  • Posts: 2,217
  • Reputation: +28/-1
    • View Profile
Re: [jquery] Alphabetical sort
« Reply #4 on: February 01, 2012, 07:03:53 AM »
Code: [Select]
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">$(document).ready(function(){
$(".list1 li").sort(asc_sort).appendTo('.list1');
$(".list2 li").sort(asc_sort).appendTo('.list2');
function asc_sort(a, b){ return ($(b).text()) < ($(a).text()); }
function dec_sort(a, b){ return ($(b).text()) > ($(a).text()); }
});</script>

    <ul class="list1">
      <li>banana <i>description</i></li>
      <li>cat <i>description</i></li>
      <li>apple <i>description</i></li>
    </ul>

    <ul class="list2">
      <li><font>image A</font> <b>banana</b> <i>description</i></li>
      <li><font>image B</font> <b>cat</b> <i>description</i></li>
      <li><font>image C</font> <b>apple</b> <i>description</i></li>
    </ul>
Returns:
Code: [Select]
    * apple description
    * banana description
    * cat description

    * image A banana description
    * image B cat description
    * image C apple description

list1 works fine, but how to make list2 sort it based on the string inside <b> not on the whole <li>?
Logged

Offline BlackScorp

  • Level 15
  • *
  • Posts: 123
  • Reputation: +6/-0
    • View Profile
    • Cruel Online
Re: [jquery] Alphabetical sort
« Reply #5 on: February 01, 2012, 07:12:32 AM »
maybe this way

Code: [Select]
function asc_sort(a, b){ return ($(b).find('b').text()) < ($(a).find('b').text());

Logged

Offline Chris

  • Game Owner
  • Level 35
  • *
  • Posts: 2,217
  • Reputation: +28/-1
    • View Profile
Re: [jquery] Alphabetical sort
« Reply #6 on: February 01, 2012, 07:57:23 AM »
Quote from: BlackScorp on February 01, 2012, 07:12:32 AM
maybe this way

Code: [Select]
function asc_sort(a, b){ return ($(b).find('b').text()) < ($(a).find('b').text());
Works :D
(now I will add it to the game and those pesky players will stop tormenting me with thier whinning, at least for a while)
« Last Edit: February 01, 2012, 07:59:09 AM by Chris »
Logged
Pages: [1]   Go Up
« previous next »
 
SimplePortal 2.3.3 © 2008-2010, SimplePortal