Javascript 根据类对 DIV 进行排序

Question

我正在尝试根据包含价格的 div 对以下静态 HTML 产品列表进行排序。在这种情况下，所有 div 都有一个 price-bold 类。有没有一种方法可以使用 javascript 对产品列表进行排序，以使用按钮/文本点击命令从低到高和从高到低排序？非常感谢您的帮助和专业知识。谢谢你，丹

<div id="gallerypaginate2" class="paginationstyle"></div>
<div id="contents">
    <table width="100%" class="vertical" id="contents-table">
        <tr class="pagination-row">
            <td width="25%" class="horizontal-seperator vertical-seperator">
                <a href="mica136-3s.html"><img src="http://ep.yimg.com/ca/I/yhst-129288146819219_2148_2126916" width="125" height="71" border="0" hspace="0" vspace="0" alt="3-Shade Billiard Light - Oversized" title="3-Shade Billiard Light - Oversized" /></a>
                <div class="name"><a href="mica136-3s.html" title="3-Shade Billiard Light - Oversized">3-Shade Billiard Light - Oversized</a></div>
                <div class="price-bold">$2,088.00</div>
            </td>
            <td width="25%" class="horizontal-seperator vertical-seperator">
                <a href="micaf101-01-abbey.html"><img src="http://ep.yimg.com/ca/I/yhst-129288146819219_2148_2132333" width="125" height="118" border="0" hspace="0" vspace="0" alt="Abbey Craftsman Fan and Mica Light Kit" title="Abbey Craftsman Fan and Mica Light Kit" /></a>
                <div class="name"><a href="micaf101-01-abbey.html" title="Abbey Craftsman Fan and Mica Light Kit">Abbey Craftsman Fan and Mica Light Kit</a></div>
                <div class="price-bold">$711.00</div>
            </td>
            <td width="25%" class="horizontal-seperator vertical-seperator">
                <a href="mica007.html"><img src="http://ep.yimg.com/ca/I/yhst-129288146819219_2148_2150148" width="103" height="125" border="0" hspace="0" vspace="0" alt="Beanpot Table Lamp" title="Beanpot Table Lamp" /></a>
                <div class="name"><a href="mica007.html" title="Beanpot Table Lamp">Beanpot Table Lamp</a></div>
                <div class="price-bold">$442.00</div>
            </td>
            <td width="25%" class="horizontal-seperator">
                <a href="mica012.html"><img src="http://ep.yimg.com/ca/I/yhst-129288146819219_2148_2162401" width="125" height="71" border="0" hspace="0" vspace="0" alt="Buffet Table Lamp" title="Buffet Table Lamp" /></a>
                <div class="name"><a href="mica012.html" title="Buffet Table Lamp">Buffet Table Lamp</a></div>
                <div class="price-bold">$370.00</div>
            </td>
        </tr>
        <tr class="pagination-row">
            <td width="25%" class="horizontal-seperator vertical-seperator">
                <a href="mica051.html"><img src="http://ep.yimg.com/ca/I/yhst-129288146819219_2148_2169261" width="125" height="71" border="0" hspace="0" vspace="0" alt="Bungalow Floor Lamp" title="Bungalow Floor Lamp" /></a>
                <div class="name"><a href="mica051.html" title="Bungalow Floor Lamp">Bungalow Floor Lamp</a></div>
                <div class="price-bold">$1,370.00</div>
            </td>
            <td width="25%" class="horizontal-seperator vertical-seperator">
                <a href="mica119c.html"><img src="http://ep.yimg.com/ca/I/yhst-129288146819219_2148_2177066" width="125" height="71" border="0" hspace="0" vspace="0" alt="Carmel Wall Sconce" title="Carmel Wall Sconce" /></a>
                <div class="name"><a href="mica119c.html" title="Carmel Wall Sconce">Carmel Wall Sconce</a></div>
                <div class="price-bold">$505.00</div>
            </td>
            <td width="25%" class="horizontal-seperator vertical-seperator">
                <a href="micaf101-bw.html"><img src="http://ep.yimg.com/ca/I/yhst-129288146819219_2148_2182877" width="125" height="71" border="0" hspace="0" vspace="0" alt="Ceiling Fan with Bell White Light Kit" title="Ceiling Fan with Bell White Light Kit" /></a>
                <div class="name"><a href="micaf101-bw.html" title="Ceiling Fan with Bell White Light Kit">Ceiling Fan with Bell White Light Kit</a></div>
                <div class="price-bold">$524.00</div>
            </td>
            <td width="25%" class="horizontal-seperator">
                <a href="micaf101-c.html"><img src="http://ep.yimg.com/ca/I/yhst-129288146819219_2148_2192940" width="125" height="71" border="0" hspace="0" vspace="0" alt="Ceiling Fan with Coppersmith Mica Light Kit" title="Ceiling Fan with Coppersmith Mica Light Kit" /></a>
                <div class="name"><a href="micaf101-c.html" title="Ceiling Fan with Coppersmith Mica Light Kit">Ceiling Fan with Coppersmith Mica Light Kit</a></div>
                <div class="price-bold">$695.00</div>
            </td>
        </tr></table>
</div>
<div id="gallerypaginate" class="paginationstyle"><a href="#" rel="previous">Prev</a> <span class="flatview"></span> <a href="#" rel="next">Next</a></div>

Answer 1

我知道我的解决方案的长度可能会吓跑你，所以我决定制作一个纯 JS 解决方案作为挑战。

它在这里，在它所有的荣耀中:

addListeners();

function addListeners()
{
    var toggle = toggleTableSort;
    var node = document.getElementById("sortTables");
    node.onclick = toggle();
}

function toggleTableSort()
{
    var status = 0;
    return function()
    {
        var table = getTable();
        var tableData = table['data'];
        var rows = table['rows'];
        if(status === 0)
        {
            status = 1;
            sortTableData(tableData, rows, "descending");
        }else if(status === 1)
        {
            status = 0;
            sortTableData(tableData, rows, "ascending");  
        }
    }   
}

function getTable()
{
    var container = document.getElementById("contents-table");
    var tbody =  getElementNodes(container, "TBODY", 1, {})[0];
    var rows = getElementNodes(tbody, "TR", 0, {"class": "pagination-row"});
    var tableData = grabTableData(rows);
    return {"data": tableData, "rows": rows};   
}

function getElementNodes(parent, tag, num, attributes)
{
    var nodes = parent.childNodes;
    var temp = [];
    tag = tag.toUpperCase();
    if(num === 0)
    {
        num = nodes.length;   
    }
    for(var i=0;i<nodes.length;i++)
    {
        var node = nodes[i];
        if(temp.length <= num)
        {
            if(node.nodeType === 1 && node.tagName === tag)
            {
                var attributeCheck = true;
                for(var attribute in attributes)
                {
                    if(attributes.hasOwnProperty(attribute))
                    {
                        var newAttribute;
                        if(attribute === "class" && !node.getAttribute(attribute))
                        {
                            newAttribute = "className";   
                        }
                        if(newAttribute)
                        {
                            if(node.getAttribute(newAttribute) !== attributes[attribute])
                            {
                                attributeCheck = false;
                                break;
                            }
                        }else if(!newAttribute)
                        {
                            if(node.getAttribute(attribute) !== attributes[attribute])
                            {
                                attributeCheck = false;
                                break;
                            }
                        }
                    }
                }
                if(attributeCheck)
                {
                    temp.push(node);   
                }
            }
        }else if(temp.length > num)
        {
            break;   
        }
    }
    return temp;
}

function grabTableData(rows)
{
    var data = [];
    for(var i=0;i<rows.length;i++)
    {
        var row = rows[i];
        var tableData = getElementNodes(row, "TD", 0, {"width": "25%"});
        data = data.concat(tableData);
    }
    return data;
}

function sortTableData(tableData, rows, order)
{
    var prices = getPrices(tableData);
    var temp = trimPrices(prices);
    order = order.toLowerCase();
    switch(order)
    {
        case "descending":
        temp = sortParallelData(tableData, temp, order, {"data": tableData, "rows": rows}, orderTables);
        break;
        case "ascending":
        temp = sortParallelData(tableData, temp, order, {"data": tableData, "rows": rows}, orderTables);
        break;      
    }
}

function orderTables(tableData, tableCells)
{
   var rows = tableData['rows'];
   var data = tableData['data'];    
   for(var i=0;i<rows.length;i++)
   {
       var items = tableCells.slice(i * 4, (i * 4) + 4);
       var cells = data.slice(i * 4, (i * 4) + 4);
       for(var j=0;j<rows[i].childNodes.length;j++)
       {
           var node = rows[i].childNodes[j];
           rows[i].removeChild(node);   
       }
       for(var k=0;k<items.length;k++)
       {
           var item = items[k];
           var cell = cells[k];
           rows[i].appendChild(item);
       }
   }

}

function getPrices(tableData)
{
    var prices = [];
    for(var i=0;i<tableData.length;i++)
    {
        var data = tableData[i];
        var node = getElementNodes(data, "DIV", 1, {"class": "price-bold"})[0];
        var text;
        var whitespace;
        if(node.innerText)
        {
            text = node.innerText;
        }else if(node.textContent)
        {
            text = node.textContent;
        }
        whitespace = text.match(/\s+/);
        text = text.replace(whitespace, "");
        prices.push(text);
    }
    return prices;
}

function trimPrices(prices)
{
    var temp = [];
    for(var i=0;i<prices.length;i++)
    {
        var price = prices[i];
        temp.push(price.replace("$", "").replace(",", ""));
    }
    return temp;
}

function sortParallelData(first, second, order, data, callback)
{
    var matches = 0;
    var parallel = first;
    var cached = second;
    var left, right, temp;
    order = order.toLowerCase();   
    switch(order)
    {
        case "descending":
        for(var i=0;i<cached.length;i++)
        {
            left = parseInt(cached[i], 10);
            right = parseInt(cached[i+1], 10);
            temp = parallel[i+1];
            if(right > left)
            {
                cached[i+1] = left;
                parallel[i+1] = parallel[i];
                parallel[i] = temp;
                cached[i] = right;
                matches++;  
            }  
        }
        break;
        case "ascending":
        for(var i=0;i<cached.length;i++)
        {
            left = parseInt(cached[i], 10);
            right = parseInt(cached[i+1], 10);
            temp = parallel[i+1];
            if(left > right)
            {
                cached[i+1] = left;
                parallel[i+1] = parallel[i];
                parallel[i] = temp
                cached[i] = right;
                matches++;  
            }  
        }
        break;
    }
    if(matches > 0)
    {
        sortParallelData(first, second, order, data, callback);
    }else
    {
        callback(data, parallel);  
    }
}

http://jsfiddle.net/t6ysg/8/

我们做了两个假设，即您的表格有一个包含您的内容的 tbody 标记，并且每个表格行总是有 4 个 td 元素。

经测试可在以下环境中运行:Firefox 4、Chrome 4、Opera 11、Safari 4、IE 8 + Quirks 和 IE 7 + Quirks。