如何找到具有相同属性值的所有xml节点

Question

我要查询一个XML标签的内容，匹配所有相同ID的父节点，并在页面上显示结果。

伪代码：

1. 加载 XML 文件
2. 从用户那里获取输入（var inputTerm）
3. 在 XML 标签 <term> 中找到 inputTerm
4. 获取父节点ID<entry>
5. 从 inputTerm 中查找所有具有相同 ID 的入口节点
6. 显示这些条目的所有子节点

我到了伪代码中的第 4 步，但不知道如何继续。我必须再次遍历 XML 文件，才能找到具有相同 ID 的所有条目标签。

XML：

<terms>
    <entry ID="1">
        <language>en</language>
        <term>user</term>
        <state>text</state>
        <use>text</use>
        <definition>text</definition>
        <definition-source>text</definition-source>
        <source>text</source>
        <circle>text</circle>
    </entry>
    <entry ID="1">
        <language>de</language>
        <term>user1</term>
        <state>text</state>
        <use>text</use>
        <definition>text</definition>
        <definition-source>text</definition-source>
        <source>text</source>
        <circle>text</circle>
    </entry>
    <entry ID="2">[...]</entry>
    [...]
</term>

jQuery:

$.ajax({
  type: "GET" ,
  url: "assets/db/export.xml" ,
  dataType: "xml" ,
  success: function(xml) {

    $('entry', xml).each(function() {
      var $entry = $(this)
      var xterm = $entry.find("term").text();

      $('#submit').click(function() {
        // get input from user
        var inputTerm = $('#find-term').val();
        // match user input and XML content
        if (inputTerm === xterm) {
          // get ID from matching term
          var matchingID = $entry.attr('ID');
          console.log(matchingID);
          // How to go on here?
          var language = $entry.find("language").text();
          var term = $entry.find("term").text();
          var state = $entry.find("state").text();
          var use = $entry.find("use").text();
          var definition = $entry.find("definition").text();
          var definitionSource = $entry.find("definition-source").text();
          var source = $entry.find("source").text();
          var circle = $entry.find("circle").text();
          // show results
          $('.values').append('<li>' + language + '</li>');
          $('.term').append('<li>' + term + '</li>');
          $('.state').append('<li>' + state + '</li>');
          $('.usage').append('<li>' + use + '</li>');
          $('.definition').append('<li>' + definition + '</li>');
          $('.definition-source').append('<li>' + definitionSource + '</li>');
          $('.source').append('<li>' + source + '</li>');
          $('.circle').append('<li>' + circle + '</li>');
        }
        else {
          console.log("No entry found.");
        }
      });
    })
  }     
});

我可以每个添加一秒吗？如何匹配具有相同 ID 的所有条目？

Answer 1

我会这样做：

1. 加载 XML 文件
2. 完成后，启用提交按钮（最初保持禁用状态）
3. 点击，
   1. 在 XML 文档中搜索匹配的字词
   2. 提取与匹配项关联的 ID 属性的值
   3. 根据这些 ID 过滤 XML 条目
   4. 将找到的结果添加到页面

我假设你想支持不区分大小写的词条搜索，所以我为此添加了一个助手：

// helper for jQuery.fn.filter
function containsCaseInsensitive(searchTerm) {
    return function () {
        return $(this).text().toUpperCase().includes(searchTerm.toUpperCase());
    };
}

$.get("assets/db/export.xml").done(function (exportXml) {
    var $exportXml = $(exportXml);

    // enable button and attach event handler after download is done
    $('#submit').prop("disabled", false).click(function() {
        var searchTerm = $('#find-term').val();
        var $terms = $exportXml.find("term").filter(containsCaseInsensitive(searchTerm));
        var ids = $terms.map(function () { return $(this).parent().attr("ID"); }).toArray();
        var $entries = $exportXml.find("entry").filter(function () { return ids.includes( $(this).attr("ID") ); });

        // don't forget to empty out the search result display

        if (!$entries.length) alert("No entry found.");

        $entries.each(function () {
            var $entry = $(this);
            $("<li>", {text: $entry.children("language").text()}).appendTo(".values");
            $("<li>", {text: $entry.children("term").text()}).appendTo(".term");
            $("<li>", {text: $entry.children("state").text()}).appendTo(".state");
            $("<li>", {text: $entry.children("use").text()}).appendTo(".usage");
            $("<li>", {text: $entry.children("definition").text()}).appendTo(".definition");
            $("<li>", {text: $entry.children("definition-source").text()}).appendTo(".definition-source");
            $("<li>", {text: $entry.children("source").text()}).appendTo(".source");
            $("<li>", {text: $entry.children("circle").text()}).appendTo(".circle");
        });
    });
});