如何按元素内容过滤解析的 XML 数据 [jQuery]

Question

所以我有一个 xml 房屋属性提要 [在 WordPress 网站上] 目前非常简单，它只是收集我想要显示的字段并将其显示为列表 [非常正常的东西] 但我现在需要能够制作两份清单，一份只显示已售出的房产，一份不显示已售出的房产。目前我的代码如下：

jQuery(function( $ ){

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

function parseXml(xml)
{
    $("#xmlmain").html("<div id='content' data-role='listview' data-inset='true'></div>");
    $(xml).find("property").each(function() {
        $("#content").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>");
    });
}
});

我是 Javascript 和 Jquery 的新手，所以我真的不知道如何过滤列表以排除已售出的属性，只包含已售出的属性。我如何调整/过滤它以获得所需的结果？我尝试使用 filter();功能，但它只是一直停止显示提要。

这是我试图合并/使用的 sn-p/示例：

var getTextNodesIn = function(el) {
return $(el).find(":not(iframe)").addBack().contents().filter(function() {
    return this.nodeType == 3;
    });
};

getTextNodesIn(el);

我需要使用的数据在下面显示的优先级字段中。这是 xml 提要的摘录：

<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>

[如果有区别，已售物业的优先级字段中的文本将是“已售”或“已售 STC”。]

任何帮助都将不胜感激，即使它只是将我指向我可以使用的与我的问题相关的资源。我的搜索似乎出现了不相关的信息，这可能是由于我不正确了解术语而导致措辞错误。

Answer 1

祝你好运伙计.. 似乎社区在现实生活中不使用 xml。我已经研究了好几天，甚至无法得到直接的答案来将 xml 存储在数据库中或使用 xquery 直接从 .xml 提要中获取我需要的数据......然后找到用户如何搜索的答案通过例如按价格顺序排列的价格和显示属性似乎相距数光年......

如果您使用 wordpress，它看起来像属性配置单元插件可能是您最好的选择...花费 150 英镑，但所有搜索都是为您完成的。

Answer 2

您的过滤功能不正确。您使用 this 的方式与它在 JavaScript 中的使用方式不同。这是一个常见的错误，因为在大多数面向对象的编程语言中，this 的含义与 JS 中的不同。试试这个函数——继续阅读下面的sn-p的更好版本——：

var getTextNodesIn = function(el) {
return $(el).find(":not(iframe)").addBack().contents().filter(function(element) {
    return element.nodeType == 3;
    });
};

getTextNodesIn(el);

问题是Array.filter() 接收一个函数作为参数。然后为数组的每个元素调用该函数，如果函数返回true，则保留该元素。该函数接收元素作为参数。当函数被执行时，this 是对全局范围的引用（很奇怪，我知道）。

您的问题是您正在检查您的全局范围内名为 nodeType 的属性是否为 3。nodeType 很可能是 undefined，因此不等于 3，因此所有元素都从数组，你会得到一个空数组。

docs 中有关过滤器的更多信息。

除此之外，我建议您从代码中重新审视一些事情。

1. 如果可能，切换到使用 JSON 而不是 XML。 JavaScript 有一个库来处理 JSON 字符串。事实上，JSON 代表 JavaScript Object Notation。你可以只做JSON.parse(data)，然后你会得到一个可以立即使用的 JavaScript 对象。在 JavaScript 中使用 JSON 比使用 XML 要好得多

2. 在 JavaScript 中，双相等比较器在大多数情况下被认为是不好的做法。它可以给你意想不到的结果。例如"3" == 3 是真的。与双等号比较时，字符串 3 和数字 3 相同。大多数情况下，您会希望使用三等号，即比较被比较事物的值和类型

3. 有一种更好的方法可以使用箭头函数编写在第一条语句中返回的函数，这是 ES6 中引入的语言特性。它还从外部范围自动绑定this，但这是另一天的故事

4. 我建议您使用比“el”更有意义的名称。从上下文来看，“产品”似乎是一个更好的选择，但为了清楚起见，我将在示例中保留“el”。

你可以像这样写同样的 sn-p：

const getTextNodesIn = el =>
  $(el)
  .find(":not(iframe)")
  .addBack()
  .contents()
  .filter(element => element.nodeType === 3)

getTextNodesIn(el);

在我看来，这更易读，更清晰

Answer 3

您可以使用startsWith 方法在您的each 方法中检查priority 的值，如下所示。

$(xml).find("property").each(function() {
    var priority = $(this).find("priority").text();

    if(priority.startsWith('Sold')) {
        //for sold properties
    } else {
        //for unsold properties
    }
});