Question

所以[在WordPress网站上]目前我有一个xml住房属性供稿，它非常简单，它只是收集我要显示的字段并将其显示为列表[相当普通的东西]，但是我现在需要能够制作两个列表，一个仅显示已售出的财产，而一个不显示已售出的财产。目前，我的代码如下：

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（）;功能，但它只是阻止了供稿的显示。

这是我尝试合并/使用的代码片段/示例：

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>

[如果有区别，则已出售属性的优先级字段中的文本将为“ Sold”或“ Sold STC”。]

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

Answer 1

您的过滤器功能不正确。您使用this的方式不是JavaScript中的方式。这是一个常见错误，因为在大多数面向对象的编程语言中，this与JS的含义不同。请改用此功能-请在下面继续阅读以获取该代码段的更好版本-：

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中过滤器的更多信息。

除此之外，我还建议您从代码中重新访问。

如果可能，请切换为使用JSON而不是XML。 JavaScript具有处理JSON字符串的库。事实上，JSON代表JavaScript Object Notation。您只需要执行JSON.parse(data)，就可以立即使用一个JavaScript对象。使用JSON比使用JavaScript中的XML更好得多
在JavaScript中，大多数情况下，双重平等比较器被认为是不好的做法。它可以给您带来意想不到的结果。例如"3" == 3为true。与双等于比较时，字符串3和数字3相同。在大多数情况下，您会希望使用三等式来比较所比较事物的值和类型
有一种更好的方法可以编写使用arrow函数在第一条语句中返回的函数，这是ES6中引入的语言功能。它还会从外部范围自动绑定this，但这又是另一回事了
我建议您使用比“ el”更有意义的名称。从上下文来看，“产品”似乎是一个更好的选择，但为了清楚起见，我将在示例中保留“ el”。

您可以这样编写相同的代码段：

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

getTextNodesIn(el);

我认为这更具可读性和清晰性

Answer 2

您可以使用priority方法在each方法中检查startsWith的值。

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

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

Answer 3

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

如果您使用的wordpress似乎是属性蜂巢插件可能是您最好的选择……价格为150英镑，但所有搜索工作均已为您完成。

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

3 个答案: