jquery re ordering
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??

What code have you come with so far? Does the ul have an id? Is it the only ul on page? — Chetter Hummin, Mar 22 '12 at 17:58
at the moment I have code to read the URL and split the string. No it's not the only ul in the page. I can give it an ID — saomi, Mar 22 '12 at 18:05
[This frequently-asked question](http://stackoverflow.com/questions/901115/get-query-string-values-in-javascript) has a few good approaches for getting variable values from a query string. — Blazemonger, Mar 22 '12 at 18:55
A `tip` would be to do this via PHP vs jQuery or JavaScript. — iambriansreed, Mar 22 '12 at 18:58

Niraj Nawanit · Answer 1 · 2012-03-22T18:46:57.170

1

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

edited Mar 22 '12 at 18:46

answered Mar 22 '12 at 18:16

Niraj Nawanit

2,431
3
16
11

Just saying that it is very complex is a vague argument and it means that you did not go through answer. You should care to be more specific when you give a feedback. – Niraj Nawanit Mar 22 '12 at 19:08
Dude. Complex means you did in **13** lines what I did in **1** line. – iambriansreed Mar 22 '12 at 19:10
"The OP commented that he already has code to get the variable value from the query string. And even if he hadn't, [that particular question is already well-answered](http://stackoverflow.com/questions/901115/get-query-string-values-in-javascript)." - @mblase75 – iambriansreed Mar 22 '12 at 19:21

score 0 · Answer 2 · answered Mar 22 '12 at 18:03

0

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

answered Mar 22 '12 at 18:03

Chris Sobolewski

12,819
12
63
96

I don't know, was part of the user agreement for SA to be the snarkiest possible? On a side note, thank you for the opportunity to learn that prepend will actually delete a node to prepend it. That is likely to be useful to me. – Chris Sobolewski Mar 22 '12 at 18:08
@iambriansreed. WIll your solution work? Can you post a sample of how your solution would work? – DG3 Mar 22 '12 at 18:08
A link to a fiddle is in my answer... @ChrisSobolewski ;) – iambriansreed Mar 22 '12 at 18:38

iambriansreed · Accepted Answer · 2012-03-22T18:50:50.473

0

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/

edited Mar 22 '12 at 18:50

answered Mar 22 '12 at 18:04

iambriansreed

21,935
6
63
79

1

How exactly does that get the value from the page URL? – Andrew Willis Mar 22 '12 at 18:13
@AndrewWillis "Looks for a href that ends with 3..." – iambriansreed Mar 22 '12 at 18:39
so where do you get the '3' from? It needs to come from the page URL – Andrew Willis Mar 22 '12 at 18:40
@AndrewWillis Read the updated answer. Review the [jQuery attribute selectors](http://api.jquery.com/category/selectors/attribute-selectors/). All - Revengeful down votes stink. – iambriansreed Mar 22 '12 at 18:45
again, You are not getting that number from the URL of the page, which is required and specified in the question. if somebody visits http://example.com/index.php?paramValue=4 then how would you get 'paramValue=4' and use that to re-order the li's? – Andrew Willis Mar 22 '12 at 18:50
The OP commented that he already has code to get the variable value from the query string. And even if he hadn't, [that particular question is already well-answered](http://stackoverflow.com/questions/901115/get-query-string-values-in-javascript). – Blazemonger Mar 22 '12 at 18:51
1

Still 3 is hardcoded. It should be referred through a variable in which value is extracted by another code. – Niraj Nawanit Mar 22 '12 at 19:03
Jesus. If the OP can't extrapolate how to replace a string with a variable then he can comment. – iambriansreed Mar 22 '12 at 19:07
You are giving an answer and so you should not make an assumption what can be done something in other's code. Moreover your answer should have a placeholder for such a variable so that one can go through your answer and understand your assumptions. – Niraj Nawanit Mar 22 '12 at 19:11
I think I just met my first Stack Troll. – iambriansreed Mar 22 '12 at 19:12
@iambriansreed It worked nice. Just needed to add a class name to elements and in your code also added the class name like this $('a.className[href*="paramValue=3"]')..... like I said to Amit Bhargava, I already got a piece of code that reads the URL parameters every time the page loads. Thanks all – saomi Mar 22 '12 at 23:51
@user794035 Nice to know after all this question's trolling you picked the right answer. – iambriansreed Mar 23 '12 at 02:10

Andrew Willis · Answer 4 · 2012-03-22T18:42:14.133

-1

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

edited Mar 22 '12 at 18:42

answered Mar 22 '12 at 18:10

Andrew Willis

2,289
3
26
53

I just changed the way to find elementID because I had a bit of a massive error! – Andrew Willis Mar 22 '12 at 18:32
Will it work if there are more than one parameter? Note that this url is just an example and later another parameter can be added into the url and then code will break. – Niraj Nawanit Mar 22 '12 at 18:44
Do you mean multiple paramValue values? if the URL is ?paramValue=3&otherthing=45, it will still work as it only searches for the 'paramValue=[0-9]+' string, returns that string and then takes the number from it. – Andrew Willis Mar 22 '12 at 18:47
interesting approach, i liked it. Also you are assuming that elementId will be at elementId index, which is kind of very specific and better way is to search the element which matches it. – Niraj Nawanit Mar 22 '12 at 18:59
Yeah I see your point, however if the list is initially in order then really the elementID should also be the index. – Andrew Willis Mar 22 '12 at 19:04
That is why I said 'better way'. What if it was 0-based values or it was a-based values, or values are not continuous integers for example (1,3,5,7). In any case, this would work. – Niraj Nawanit Mar 22 '12 at 19:14

jquery re ordering according to url parameters

4 Answers4

jquery re ordering
according to url parameters