使用 jQuery 将复杂的 li 应用到降序

Question

在下面的演示中，它根据文本对 li 进行排序。

<abbr id="arti173" class="butarti">8</abbr>

我想根据缩写中的文字来订购li's

非常感谢您的帮助。我最近一直在研究它，但卡住了。

html

    <body>
        <input type="button" id="test" value="Sort List (click again to reverse)" />
        <ul id="list">
            <li>Peter<div class="yordivu">
<div>
<img>
</div>                       
                       <div>   <button id="likefuncid173" class="likebutx mybutton" onclick="likefunc(173,1,'abbr#arti173')"><abbr id="arti173" class="butarti">6</abbr><span class="fa fa-thumbs-up"></span></button><button id="unlikefuncid173" class="mybutton" onclick="unlikefunc(173,1,'abbr#eksi173')"><abbr id="eksi173" class="buteksi">2</abbr><span class="fa fa-thumbs-down"></span></button>
                                </div>                                                  
                                </div>
                                <div style="word-wrap: break-word;">
                                <div><h3 class="yornameh"></h3><span class="text-muted"><strong></strong></span></div>
                                <div class="yortext">           
                                </div>
                </div></li>
            <li>Mary<div class="yordivu">
<div>
<img>
</div>                       
                       <div>   <button id="likefuncid173" class="likebutx mybutton" onclick="likefunc(173,1,'abbr#arti173')"><abbr id="arti173" class="butarti">8</abbr><span class="fa fa-thumbs-up"></span></button><button id="unlikefuncid173" class="mybutton" onclick="unlikefunc(173,1,'abbr#eksi173')"><abbr id="eksi173" class="buteksi">3</abbr><span class="fa fa-thumbs-down"></span></button>
                                </div>                                                  
                                </div>
                                <div style="word-wrap: break-word;">
                                <div><h3 class="yornameh"></h3><span class="text-muted"><strong></strong></span></div>
                                <div class="yortext">           
                                </div>
                </div></li>
            <li>Paul<div class="yordivu">
<div>
<img>
</div>                       
                       <div>   <button id="likefuncid173" class="likebutx mybutton" onclick="likefunc(173,1,'abbr#arti173')"><abbr id="arti173" class="butarti">5</abbr><span class="fa fa-thumbs-up"></span></button><button id="unlikefuncid173" class="mybutton" onclick="unlikefunc(173,1,'abbr#eksi173')"><abbr id="eksi173" class="buteksi">0</abbr><span class="fa fa-thumbs-down"></span></button>
                                </div>                                                  
                                </div>
                                <div style="word-wrap: break-word;">
                                <div><h3 class="yornameh"></h3><span class="text-muted"><strong></strong></span></div>
                                <div class="yortext">           
                                </div>
                </div></li>
            <li>Allen<div class="yordivu">
<div>
<img>
</div>                       
                       <div>   <button id="likefuncid173" class="likebutx mybutton" onclick="likefunc(173,1,'abbr#arti173')"><abbr id="arti173" class="butarti">1</abbr><span class="fa fa-thumbs-up"></span></button><button id="unlikefuncid173" class="mybutton" onclick="unlikefunc(173,1,'abbr#eksi173')"><abbr id="eksi173" class="buteksi">10</abbr><span class="fa fa-thumbs-down"></span></button>
                                </div>                                                  
                                </div>
                                <div style="word-wrap: break-word;">
                                <div><h3 class="yornameh"></h3><span class="text-muted"><strong></strong></span></div>
                                <div class="yortext">           
                                </div>
                </div></li>

        </ul>
    </body>

javascript

            function sortUnorderedList(ul, sortDescending) {
            if (typeof ul == "string") ul = document.getElementById(ul);

            var lis = ul.getElementsByTagName("LI");

            var vals = [];
            for (var i = 0, l = lis.length; i < l; i++)
            vals.push(lis[i].innerHTML);
            vals.sort();

            if (sortDescending) vals.reverse();

            for (var i = 0, l = lis.length; i < l; i++)
            lis[i].innerHTML = vals[i];
        }

        window.onload = function() {
            var desc = false;
            document.getElementById("test").onclick = function() {
                sortUnorderedList("list", desc);
                desc = !desc;
                return false;
            }
        }

Answer 1

首先，文档中不应有超过一个 id 值。任何类型的查询都将失败。

针对您的问题，您可以将要与 li 一起排序的数组 abbr 内的文本插入，然后根据文本进行排序。请记住这一点，将您的代码更改为此 -

for (var i = 0, l = lis.length; i < l; i++)
{
    // pushing an array with text as second field
    vals.push([lis[i].innerHTML, lis[i].getElementsByClassName("butarti")[0].innerHTML]);
}

// sorting the final based on text
vals.sort(function(a,b){return parseInt(a[1]) - parseInt(b[1])});

if (sortDescending) vals.reverse();

// replacing the existing li tags html
for (var i = 0, l = lis.length; i < l; i++)
    lis[i].innerHTML = vals[i][0];

希望这有效。

使用 jQuery 将复杂的 li 应用到降序

Apply complicated li to descending order with jQuery

javascript

sorting

jquery

html-lists