使用 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()。

sn-p：

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>