代码之家 › 专栏 › 技术社区 › Moose

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

xml-parsing xml html jquery javascript

Moose · 技术社区 · 7 年前

所以我有一个xml房屋属性feed[在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()函数尝试了一些尝试,但它一直在阻止feed的显示。

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

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

getTextNodesIn(el);

<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”。]

3 回复 | 直到 7 年前

Ibrahim Khan 7 年前

你可以检查 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
    }
});

Daniel Reina 7 年前

您的筛选器功能不正确。你使用的方式 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 . 函数将元素作为参数接收。当函数执行时, 是指全球范围(我知道很奇怪)。

你的问题是你正在检查 nodeType 节点类型 很可能是 undefined

中有关筛选器的详细信息 docs

除此之外,我建议您从代码中重新访问一些内容。

如果可能,请切换到使用JSON而不是XML。JavaScript有一个处理JSON字符串的库。事实上,JSON代表JavaScript对象表示法。你可以这样做 JSON.parse(data) ,然后得到一个可以立即使用的JavaScript对象。在JavaScript中使用JSON比使用XML要好得多
"3" == 3 是真的。与double equals相比,字符串3和数字3是相同的。在大多数情况下,您会希望使用三倍等于来比较要比较的对象的值和类型
有一种更好的方法可以使用arrow函数编写在第一条语句中返回的函数,这是ES6中引入的一种语言特性。它还自动绑定从外部看,这是另一个故事
我建议你用比“el”更有意义的名字。从上下文来看,“产品”似乎是一个更好的选择,但为了清楚起见,我将在示例中保留“el”。

你可以这样写同样的片段:

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

getTextNodesIn(el);

在我看来那更清晰易懂

DonQuery 7 年前

如果你使用wordpress,那么属性配置单元插件可能是你的最佳选择。。。花费150但是所有的搜索都是为你完成的。