检索列表的值,然后排序列表

时间:2014-09-11 13:30:28

标签: javascript jquery html

我有一个列表,我想获取值,然后对其进行排序。

我只使用了下面的一些LI,这个列表实际上更多,更大;完整列表包含sortBy中的所有值。但我觉得最好只列出一些简单的东西。

我只需要按照JS sortBy中的顺序对它们进行排序。 JS根本没有工作要排序。

没有控制台错误或任何这种性质,只是没有排序。

而不是6M,9M,3M,我希望它分类(例如)3M,6M,9M等等。非常简单的概念,我认为它非常容易。但事实证明这是一件很苦差事。

谢谢。

使用Javascript:

    jQuery(document).ready(function() {
        jQuery('ul.linkList').each(function() {
            var sortBy = ['Newborn', '3M', '6M', '9M', '12M', '18M', '24M', '2T', '3T', '4T', '4', '5', '6', '6X', '7', '8', '10', '12', '14', '16', '1 SZ', ' 1 SZ 0-3M', '1 SZ 3M-9M', '1 SZ 9M-24M', '1 SZ 2-4', '1 SZ 4-7', '1 SZ 7-16', 'S', 'M', 'L', 'XL', 'Hide extra values', 'View all'];  //Values to sort by once data is obtained
            var theList = jQuery(this);
            var listItems = theList.children('li').get(); //Get values from LI        
            var numHidden = 0;

            listItems.sort(function(a,b) {
                var indexA = jQuery.trim(jQuery(a).find('a').text());
                var indexB = jQuery.trim(jQuery(b).find('a').text());
                indexA = jQuery.inArray(indexA, sortBy);
                indexB = jQuery.inArray(indexB, sortBy);
                return (indexA < indexB) ? -1 : (indexA > indexB) ? 1 : 0;
            });

            theList.append(listItems);
        });
    });

HTML:

<ul class="linkList SizeChicklets" id="binValue-2">
      <li class="binValue">
        <input name="binId" value="size_name" type="hidden">         
        <input name="binValue" value="0-3 Months" type="hidden">                       
        <a href=".com/s?field_size_name=0-3+Months&amp;ie=UTF8&amp;refinementHistory=subjectbin%2Csize_name%2Cgeneric_text_2-bin%2Cprice%2Cbrandtextbin%2Cgeneric_text_1-bin&amp;searchBinNameList=subjectbin%2Csize_name%2Cgeneric_text_2-bin%2Cprice%2Cbrandtextbin%2Cgeneric_text_1-bin&amp;searchKeywords=*&amp;searchNodeID=5690131011&amp;searchRank=generic-one-desc-rank&amp;searchSize=12" rel="nofollow">
        <input type="checkbox">
        <span>        6M</span></a>
      </li>
      <li class="binValue">
        <input name="binId" value="size_name" type="hidden">         
        <input name="binValue" value="10" type="hidden">                       
        <a href=".com/s?field_size_name=10&amp;ie=UTF8&amp;refinementHistory=subjectbin%2Csize_name%2Cgeneric_text_2-bin%2Cprice%2Cbrandtextbin%2Cgeneric_text_1-bin&amp;searchBinNameList=subjectbin%2Csize_name%2Cgeneric_text_2-bin%2Cprice%2Cbrandtextbin%2Cgeneric_text_1-bin&amp;searchKeywords=*&amp;searchNodeID=5690131011&amp;searchRank=generic-one-desc-rank&amp;searchSize=12" rel="nofollow">
        <input type="checkbox">
        <span>        9M</span></a>
      </li>
      <li class="binValue">
        <input name="binId" value="size_name" type="hidden">         
        <input name="binValue" value="12" type="hidden">                       
        <a href=".com/s?field_size_name=12&amp;ie=UTF8&amp;refinementHistory=subjectbin%2Csize_name%2Cgeneric_text_2-bin%2Cprice%2Cbrandtextbin%2Cgeneric_text_1-bin&amp;searchBinNameList=subjectbin%2Csize_name%2Cgeneric_text_2-bin%2Cprice%2Cbrandtextbin%2Cgeneric_text_1-bin&amp;searchKeywords=*&amp;searchNodeID=5690131011&amp;searchRank=generic-one-desc-rank&amp;searchSize=12" rel="nofollow">
        <input type="checkbox">
        <span>        3M</span></a>
      </li>
</ul>

1 个答案:

答案 0 :(得分:0)

不确定为什么要尝试编写自己的排序?看看这篇stackoverflow文章。 How may I sort a list alphabetically using jQuery?