Filter XML prior to display

Filter XML prior to display

I have a page that displays a list of printers and other info taken from an XML file, but I want to filter the list based on their speeds prior to them being displayed on the page so that only those within a specific speed range will display (e.g. "20-40", "41-60", "61-100" and so on). I'm new to Javascript and even newer to jQuery, so I need some help as to how to create a filter for that. Here is the structure of my XML file and here is my Javascript/jQuery so far for displaying it (also any suggestions for cleaning up the code are welcome as well).


<?xml version="1.0" encoding="utf-8"?>
<pricing>
    <item speedbg="" thumb="">
        <product></product>
        <url></url>
        <msrp></msrp>
        <lease></lease>
        <sale></sale>
        <speed></speed>
        <color></color>
        <zoom></zoom>
    </item>
</pricing>


<script type="text/javascript">

    $(document).ready(function()
    {
      $.ajax({
        type: "GET",
        url: "productData.xml",
        dataType: ($.browser.msie) ? "xml" : "text/xml",
        success: parseXml,
        error: err
      });
    });
   
    function err(xhr, reason, ex)
    {
      $('#container').append(reason);
    }

    function parseXml(xml)
    {
      $('item',xml).each(function(i)
      {
   
                var $item = $(this);
                var product = $item.find('product').text();
                var msrp = $item.find('msrp').text();
                var lease = $item.find('lease').text();
                var sale = $item.find('sale').text();
                var speed = $item.find('speed').text();
                var color = $item.find('color').text();
                var speed = $item.find('speed').text();
                var zoom = $item.find('zoom').text();
                var url = $item.find('url').text();
                var speedbg = $item.attr('speedbg');
                var thumb = $item.attr('thumb');
   
                var thumbDisplay = '<div id="item_thumb"><a href="' + url + '"><img id="thumb_border" alt="" src="../../images/copiers/' + thumb + '" /></a> </div>';
                var leftCol = '<div id="item_info"><div id="name"><a href="' + url + '">' + product + '</a></div><div id="speed" style="background:url(../../images/' + speedbg + ') repeat;">' + speed + '</div></div><div id="item_leftcol"><ul id="description"><li>' + speed + '-ppm ' + color + ' digital MFP</li><li>1200 dpi resolution</li><li>' + zoom + '% zoom range</li></ul></div>';
                var rightCol = '<div id="item_rightcol"><div id="msrp">MSRP: <s>' + msrp + '</s></div><div id="lease">Lease: <strong>' + lease + '</strong></div><div id="sale">Sale: <strong>' + sale + '</strong></div></div><div id="item_links"><a href="' + url + '">More Info</a> &nbsp;|&nbsp; <a href="../../copier.php">Online Quote</a></div>';
                var itemInfo = ' ' + leftCol + '' + rightCol + ' ';
               
                var containerDisplay = '<div id="item"> ' + thumbDisplay + '' + itemInfo + ' </div>';
   
                $('#container').append($(containerDisplay));
               
                $('.loadingPic').fadeOut(1400);
            });
    }

</script>