Question

在下面的演示中，它根据文字命令li。

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

我想根据abbr。

中的文字订购li

我非常感谢你的帮助。我最近一直在努力，而且卡住了。

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。任何形式的查询都将失败。

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

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应用于降序

1 个答案: