Question

我有一个像这样的XML文件：

<movies>
    <movie>
        <title>A title</title>
        <year>2016</year>
    <boxoffice>18 million</boxoffice>
    </movie>
    <movie>
        <title>Second title</title>
        <year>2010</year>
        <boxoffice>10 million</boxoffice>
    </movie>
<movies>

我希望在2015年之后找到所有电影并使用jquery在表格中显示。我使用：

获取xml

function getx() {
            var x = $.ajax({
                url:      movies.xml,
                datatype: "xml",
                async:    false
            });
            return x.responseXML;
        }

然后使用：

function find(year){
            var x = getx();
            $(x).find("year").each(function() {
                if (Number($(this).text()) > Number(year) {
                    $(document.getElementById("results")).append("<tr><td>" + $(this).text() + "</td></tr>");
                }
            });
        }

此返回创建一个包含2016的表行。如何修改此行以搜索一个元素，一旦找到它将返回其所属集合中的所有元素？（我希望获得一个包含标题，年份和票房的表格行）

Answer 1

首先：使用ajax调用作为同步是一个问题，我建议您使用callback。

第二：为了将xml转换为jQuery对象，您可以使用jQuery.parseXML( data )。转换后，您可以使用.filter()和.each()来选择所需的元素，并将其附加到表中。

在jquery中the ID Selector (“#id”)是：

$('#results')

而不是：

$(document.getElementById("results"))

为了获取您可以使用的兄弟元素：Node.nextSibling和Node.previousSibling，您可以使用jQuery.prev()和jQuery.next()。

摘录：

＆＃13;

var xml = '<movies>\
        <movie>\
        <title>A title</title>\
<year>2016</year>\
<boxoffice>18 million</boxoffice>\
</movie>\
<movie>\
<title>Second title</title>\
<year>2010</year>\
<boxoffice>10 million</boxoffice>\
</movie>\
</movies>';

var xmlDoc = $.parseXML( xml );
var jqXml = $(xmlDoc).find('year').filter((idx, ele) => {return +ele.textContent > 2015;});
jqXml.each(function(idx, ele) {
    $('#results').append("<tr><td>" + ele.previousSibling.textContent +
                    "</td><td>" + ele.textContent + "</td><td>" + 
                    ele.nextSibling.textContent + "</td></tr>");
})

＆＃13;

td {
    border: 1px solid;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table id="results">
    
</table>

＆＃13;

使用jQuery在XML文件中搜索元素

1 个答案: