jquery re ordering <li> according to url parameters

Question

I want to reordering my list of items according to the parameters in the URL.

Here's my list:

<ul>
   <li><a href='page.php?paramValue=1'>iten1</a></li>
   <li><a href='page.php?paramValue=2'>iten2</a></li>
   <li><a href='page.php?paramValue=3'>iten3</a></li>
   <li><a href='page.php?paramValue=4'>iten4</a></li>

and if for example the url its: mydomain.com/page.php?paramValue=3 the list sould reordering and the 3rd li should become the first one in the list, when the page load (When any iten is clicked the page loads agian), like this:

<ul>
       <li><a href='page.php?paramValue=3'>iten3</a></li>
       <li><a href='page.php?paramValue=1'>iten1</a></li>
       <li><a href='page.php?paramValue=2'>iten2</a></li>           
       <li><a href='page.php?paramValue=4'>iten4</a></li>
   </ul>

Any tips??

Answer 1

Try:

The code below looks for a href that ends with 3 grabs the parent (li) and prepends it it to the ul.

$('a[href$="3"]').parent().prependTo('ul');

Add more exacting selectors as relevant.

http://jsfiddle.net/iambriansreed/DDAvY/2/

Update:

The following is a little more precise. The code below looks for a href that contains paramValue=3

$('a[href*="paramValue=3"]').parent().prependTo('ul');

http://jsfiddle.net/iambriansreed/DDAvY/4/

Answer 2

Try below code. Have not tested, but should work.

var ulElement = $("ul"); // this may change if you want a specific ul element.
var linkElems = window.location.href.replace(/.*\?/,"").split('&');
var paramValueStr = "";
for (var i=0; i < linkElems.length; i++) {
    if (linkElems[i].indexOf("paramValue") == 0) {
        paramValueStr  = linkElems[i];
    }
}
if (paramValueStr == "") {
    return;
}

var elemToRemove = ulElement.find('a [href*="' + paramValueStr + '"]').parent();
elemToRemove.remove(); // remove from original place
elemToRemove.prependTo(ulElement); // insert into beginning of ul

Answer 3

Assuming they will always be the same, you can use string.split() to get the number after the value:

href = $(a).attr('href');
href.split()
//href is now an array[page.php?paramValue, number];
//you can use href[1] to sort the elements.

If you'd like to continue JQUery, there is a plugin built for just that:

http://james.padolsey.com/javascript/sorting-elements-with-jquery/

If you use that plugin, your code would look something like this:

$('li').sortElements(function(a, b){
    aHref = $(a).attr('href');
    bHref = $(b).attr('href');
    aHref = aHref.split();
    bHref = bHref.split();
    return aHref[1] > bHref[1] ? 1 : -1;
});

Admittedly, this could probably be made more pretty, but it should work

Answer 4

try this:

javascript:

elementID = /[0-9]+/.exec(/paramValue=[0-9]+/.exec(location.search));
$('li:nth-child('+elementID+')', 'ul#ulID').prependTo('ul#ulID');

you could also do this:

elementID = /[0-9]+/.exec(/paramValue=[0-9]+/.exec(location.search));
$('ul#ulID').prepend($('li:nth-child('+elementID+')', 'ul#ulID')