jquery переупорядочение <li> в соответствии с параметрами URL

Question

Я хочу изменить свой список элементов в соответствии с параметрами в URL.

Вот мой список:

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

и если, например, URL-адрес его: mydomain.com/page.php?paramValue=3, список может изменить порядок, и 3-й li должен стать первым в списке, когда страница загружается (при нажатии на любой iten страница загружается снова).), как это:

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

Какие-нибудь советы??

Answer 1

Пытаться:

Код ниже ищет href это заканчивается 3 хватает родителя (li) и добавляет его к ul.

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

Добавьте более требовательные селекторы по мере необходимости.

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

Обновить:

Следующее немного более точно. Код ниже ищет href который содержит paramValue=3

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

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

Answer 2

Попробуйте код ниже. Не проверял, но должен работать.

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

Предполагая, что они всегда будут одинаковыми, вы можете использовать string.split(), чтобы получить число после значения:

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

Если вы хотите продолжить JQUery, для этого есть плагин:

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

Если вы используете этот плагин, ваш код будет выглядеть примерно так:

$('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;
});

По общему признанию, это могло бы быть сделано более симпатичным, но это должно работать

Answer 4

Попробуй это:

JavaScript:

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

Вы также можете сделать это:

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