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

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() .

代码片段:

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>");
})

td {
    border: 1px solid;
}

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


<table id="results">
    
</table>