jquery根据url参数重新排序<li>

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被点击时，页面加载agian），像这样：

<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

试试下面的代码。尚未测试，但应该可以工作。

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 2

试试：

下面的代码寻找一个以3 结尾的href 抓取父级 (li) 并将其添加到 ul 前面。

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

根据需要添加更严格的选择器。

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

更新：

以下内容更准确一些。下面的代码查找 包含 paramValue=3 的href

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

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

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