javascript - 使用 .sort(function (a, b) 按降序数字顺序列出解析的 xml 数据

Question

所以基本上我有这个 xml feed，它将住房属性列出到自定义 wordpress 主题中 [xml feed 托管在 Expertagent 上]，并且我一直在尝试按降序数字顺序输出结果，该顺序由内部价格值决定每个 xml“项目”[在本例中为“属性”]。我已经获得了按状态显示属性的提要[待售、已售出等]，但我似乎无法让这部分工作。我要么破坏提要，要么我输入的代码根本不执行任何操作!

注意:我通常不是处理 javescript 或 jquery 方面的人，所以我对此还很新手。

这是我的 .js 文件和我当前的尝试:

jQuery(function( $ ){

$(document).ready(function() {
    $.ajax({
        type: "GET",
        url: "properties2.xml",
        dataType: "xml",
        success: parseXml
    });
});

function parseXml(xml) {

    $(xml).find("property").each(function() {

        var priority = $(this).find("priority").text();
        if(priority.startsWith('On Market')) {
            $("#xmlmain").append("<div class='xmlwrapper'><div class='xmlleft'><img src='"+$(this).find('[name="Photo 1"]').text()+"'/></div><div class='xmlright'><h2>"+$(this).find("advert_heading").text()+"</h2><p class='price'>"+$(this).find
            ("price_text").text()+"</p><p class='priority'>"+$(this).find("priority").text()+"</p><p>"+$(this).find("main_advert").text()+"</p><a href='"+$(this).find("web_link").text()+"' target='_blank'>VIEW > </a></div></div>");
        }
        else {
            if(priority.startsWith('Under Offer')) {
                $("#xmlmain").append("<div class='xmlwrapper'><div class='xmlleft'><img src='"+$(this).find('[name="Photo 1"]').text()+"'/></div><div class='xmlright'><h2>"+$(this).find("advert_heading").text()+"</h2><p class='price'>"+$(this).find
                ("price_text").text()+"</p><p class='priority'>"+$(this).find("priority").text()+"</p><p>"+$(this).find("main_advert").text()+"</p><a href='"+$(this).find("web_link").text()+"' target='_blank'>VIEW > </a></div></div>");
            }     
        }    

    });

    $('#xmlmain').find('numeric_price').text().sort(function (a, b) {
        return $(a).attr('numeric_price') - $(b).attr('numeric_price');
    })
    .appendTo('#xmlmain');

}
});

显然，下面的部分是我用来尝试对其进行排序的部分，但显然我要么犯了一些菜鸟错误，要么我不在正确的轨道上，因为它实际上什么也没做!

$('#xmlmain').find('numeric_price').text().sort(function (a, b) {
    return $(a).attr('numeric_price') - $(b).attr('numeric_price');
})
.appendTo('#xmlmain');

所以我试图让属性在它们的priority.startsWith部分中从最高价格到最低价格列出[但最好知道如何交换]。价格数据包含在“price_text”和/或“numeric_price”元素中。使用我的代码，我尝试了两种方法，但我假设 numeric_price 是更好的选择，因为它不包含除数字数据之外的任何内容。

这也是 xml feed 的示例:

<properties>
<property reference="MR139">
    <instructedDate>06/08/2018 17:07:05</instructedDate>
    <price_text>£600,000</price_text>
    <numeric_price>600000.0000</numeric_price>
    <priority>On Market</priority>
    <advert_heading>house for sale</advert_heading>
    <main_advert>some text about the property</main_advert>
    <web_link>www.example.com</web_link>
    <property_style>Detached</property_style>
    <property_reference>111111</property_reference>
    <newHome>NO</newHome>
    <noChain>NO</noChain>
    <furnished>Unknown</furnished>
    <currency>GBP</currency>
    <featuredProperty>NO</featuredProperty>
    <pictures>
      <picture name="Photo 1" lastchanged="2018-08-06T15:44:48.5800534Z">
          <filename>example.jpg</filename>
      </picture>
    </pictures>
</property>
</properties>

任何帮助将不胜感激!

Answer 1

这是您需要的排序函数:

function priceSort(a, b) {
  return Number($(b).find('numeric_price').text()) - Number($(a).find('numeric_price').text());
}

就像创建 HTML 时一样，您需要 find() 价格，然后获取其 text()，因为它是子节点，而不是属性。您还需要将其转换为数字，否则 JavaScript 会将它们作为字符串进行比较。

您可以在现有代码中使用该函数，替换 parseXml() 的第一行，如下所示:

$($(xml).find("property").get().sort(priceSort)).each(function() {

这首先获取所有属性，调用 get() 将它们转换为非 jQuery 节点数组，在数组上调用 sort()，然后传递结果返回到 $() 再次将其转换为 jQuery 集合。最后，调用 each() 来创建 HTML 部分。