By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,384 Members | 1,829 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,384 IT Pros & Developers. It's quick & easy.

indexing a list by id

P: n/a
Hi.

I have a list. List should be indexed with id number, but how i can do
it? Should I get list id's to array and use sort or is there better
solutions for that?

<ul id='List'>
<li id="list_3">Apples</li>
<li id="list_1">Grapes</li>
<li id="list_2">Strawberries</li>
</ul>
<a href="#" onclick="sList()">Sortable</a>
<script>
function sList(){

}

</script>
Aug 6 '08 #1
Share this Question
Share on Google+
2 Replies


P: n/a
On Aug 6, 6:36*am, torso <petteri.torsso...@gmail.comwrote:
Hi.

I have a list. List should be indexed with id number, but how i can do
it? Should I get list id's to array and use sort or is there better
solutions for that?

*<ul id='List'>
* * * * * * * * * * * * * * * * <li id="list_3">Apples</li>
* * * * * * * * * * * * * * * * <li id="list_1">Grapes</li>
* * * * * * * * * * * * * * * * <li id="list_2">Strawberries</li>
*</ul>
<a href="#" onclick="sList()">Sortable</a>
<script>
function sList(){

}

</script>
I can't say this is the best way but something like this might get you
started:

<script type="text/javascript">
function sortList(id) {
var ul = document.getElementById(id);
var lis = new Array();
while (ul.getElementsByTagName('LI').length 0) {
var li = ul.getElementsByTagName('LI')[0];
lis.push(li);
ul.removeChild(li);
}
lis.sort(function(a, b) {
if (a.id < b.id) {
return -1;
}
else if (a.id b.id) {
return 1;
}
else {
return 0;
}
});
for (var i = 0; i < lis.length; i++) {
ul.appendChild(lis[i]);
}
}
</script>

...

<ul id="mylist">
<li id="item3">Item3</li>
<li id="item1">Item1</li>
<li id="item2">Item2</li>
</ul>
<input type="button" value="Sort" onclick="sortList('mylist');"/>

Basically just created an array of li elements and removed them from
the ul element, called the sort method on the array using a function
that compared ids, and put the li elements back in the ul element.

You could even allow them to sort in both orders (first up, then down)
via a simple change in the javascript:

<script type="text/javascript">
var reverse = new Array();

function sortList(id) {
var ul = document.getElementById(id);
var lis = new Array();
while (ul.getElementsByTagName('LI').length 0) {
var li = ul.getElementsByTagName('LI')[0];
lis.push(li);
ul.removeChild(li);
}
lis.sort(function(a, b) {
if (a.id < b.id) {
return -1;
}
else if (a.id b.id) {
return 1;
}
else {
return 0;
}
});
if (reverse[id] == true) {
lis.reverse();
}
reverse[id] = ! reverse[id];
for (var i = 0; i < lis.length; i++) {
ul.appendChild(lis[i]);
}
}
</script>

HTH.
Aug 6 '08 #2

P: n/a
On 6 elo, 15:11, Tom Cole <tco...@gmail.comwrote:
On Aug 6, 6:36*am, torso <petteri.torsso...@gmail.comwrote:
Hi.
I have a list. List should be indexed with id number, but how i can do
it? Should I get list id's to array and use sort or is there better
solutions for that?
*<ul id='List'>
* * * * * * * * * * * * * * * * <li id="list_3">Apples</li>
* * * * * * * * * * * * * * * * <li id="list_1">Grapes</li>
* * * * * * * * * * * * * * * * <li id="list_2">Strawberries</li>
*</ul>
<a href="#" onclick="sList()">Sortable</a>
<script>
function sList(){
}
</script>

I can't say this is the best way but something like this might get you
started:

<script type="text/javascript">
* * * * * function sortList(id) {
* * * * * * * * var ul = document.getElementById(id);
* * * * * * * * var lis = new Array();
* * * * * * * * while (ul.getElementsByTagName('LI').length 0) {
* * * * * * * * * * * * var li = ul.getElementsByTagName('LI')[0];
* * * * * * * * * * * * lis.push(li);
* * * * * * * * * * * * ul.removeChild(li);
* * * * * * * * }
* * * * * * * * lis.sort(function(a, b) {
* * * * * * * * * * * * if (a.id < b.id) {
* * * * * * * * * * * * * * * * return -1;
* * * * * * * * * * * * }
* * * * * * * * * * * * else if (a.id b.id) {
* * * * * * * * * * * * * * * * return 1;
* * * * * * * * * * * * }
* * * * * * * * * * * * else {
* * * * * * * * * * * * * * * * return 0;
* * * * * * * * * * * * }
* * * * * * * * });
* * * * * * * * for (var i = 0; i < lis.length; i++) {
* * * * * * * * * * * * ul.appendChild(lis[i]);
* * * * * * * * }
* * * * }
</script>

...

<ul id="mylist">
* * <li id="item3">Item3</li>
* * <li id="item1">Item1</li>
* * <li id="item2">Item2</li>
</ul>
<input type="button" value="Sort" onclick="sortList('mylist');"/>

Basically just created an array of li elements and removed them from
the ul element, called the sort method on the array using a function
that compared ids, and put the li elements back in the ul element.

You could even allow them to sort in both orders (first up, then down)
via a simple change in the javascript:

<script type="text/javascript">
* * * * * var reverse = new Array();

* * * * * function sortList(id) {
* * * * * * * * var ul = document.getElementById(id);
* * * * * * * * var lis = new Array();
* * * * * * * * while (ul.getElementsByTagName('LI').length 0) {
* * * * * * * * * * * * var li = ul.getElementsByTagName('LI')[0];
* * * * * * * * * * * * lis.push(li);
* * * * * * * * * * * * ul.removeChild(li);
* * * * * * * * }
* * * * * * * * lis.sort(function(a, b) {
* * * * * * * * * * * * if (a.id < b.id) {
* * * * * * * * * * * * * * * * return -1;
* * * * * * * * * * * * }
* * * * * * * * * * * * else if (a.id b.id) {
* * * * * * * * * * * * * * * * return 1;
* * * * * * * * * * * * }
* * * * * * * * * * * * else {
* * * * * * * * * * * * * * * * return 0;
* * * * * * * * * * * * }
* * * * * * * * });
* * * * * * * * * if (reverse[id] == true) {
* * * * * * * * * * * * * * lis.reverse();
* * * * * * * * * }
* * * * * * * * * reverse[id] = ! reverse[id];
* * * * * * * * for (var i = 0; i < lis.length; i++) {
* * * * * * * * * * * * ul.appendChild(lis[i]);
* * * * * * * * }
* * * * }
</script>

HTH.
Thanks for help.
Aug 6 '08 #3

This discussion thread is closed

Replies have been disabled for this discussion.