如何使用 JQuery 在 xml 中获取指定标签的直接子代

Question

请检查以下代码。我只需要检查父标签内定义的子项。

如果该父项中出现任何意外的子项，我需要将其报告为错误。

这是我的 XML 文件：

<places>
  <Tirunelveli>XXXX</Tirunelveli>//allowed child of places
  <Tiruchendur></Tiruchendur>//allowed child of places
  <Alwar></Alwar>//allowed child of places
  <sweet></sweet>//not allowed child of places and i have to report this tag as error
</places>

我需要检查 <places> 父级是否只有允许的子级标签。否则我需要将其添加为错误。

var rd = new FileReader();
rd.onload = function(e){  
var xmlDoc = $.parseXML(this.result);                   
var $xml = $(xmlDoc);
//check allowed child of front tag
check_allowed_direct_child("places", "Tirunelveli,Tiruchendur,Alwar", "RULE_002", "Fail");                  

//Function to check the x tag have only the alowed child y
function check_allowed_direct_child(x,y,rule,error_type)
{
    var child_array = y.split(',');
    var child_count=child_array.length;
    var ischild=""
    var xmlchild="";
    $xml.children(x).each(function()
    {
        ischild="no";
        xmlchild=this.value;
        for(i=0;i<count;i++)
        {
        if(child_array[i]==xmlchild)
        {
            ischild="yes";
        }
        }
        if(ischild=="no")
        {
            //count the total error and warnings
            check_total_error_warning(error_type);
            $("#validation_report").append('<tr class="err"><td><a href="Asset\Rules\Rule.html\#'+rule+'">'+rule+'</td><td><span class="highlight">&#x0003C;'+xmlchild+'&#x0003E;</span> is not allowed inside the <span class="highlight">&#x0003C;'+x+'&#x0003E;</span> element</td><td class="'+classname+'">'+error_type+'</td></tr>');
            }

            });
            }

};rd.readAsText(this.files[i]);

但是 children() 代码不起作用。我做错了什么？

Answer 1

您 select 父节点需要更正的方式：使用 find 定位它，然后对该结果（不带参数）使用 children 以获取所有子节点。

如果父节点是 XML 的根节点，那么 find 将找不到它，但是使用 addBack 您也可以在匹配中包含根节点。

我也会为您的函数名称使用驼峰式命名，并使用 jQuery 函数来构建动态 HTML。

这是它的样子：

var $xml = $("<aa><bb></bb><cc></cc><dd></dd><ee></ee></aa>");
var className = "someClass"
 
//check allowed child of front tag
checkChildAllowed($xml, "aa", ["bb","cc","dd"], "RULE_002", "Fail");                   

//Function to check the x tag have only the allowed child y
function checkChildAllowed($xml, parent, allowedChildren, rule, errorType) {
    // Make sure to first locate the parent correctly:
    var $parent = $xml.find(parent).addBack(parent); 
    // Uppercase tag names as jQuery uses that HTML convention
    allowedChildren = allowedChildren.map(childName => childName.toUpperCase()); 
    $parent.children().each(function () {
        if (allowedChildren.includes(this.nodeName)) return; // tag is OK
        // Include this if that function is defined:
        //check_total_error_warning(error_type); 
        $("#validation_report").append( // Use jQuery functions
            $("<tr>").addClass("err").append(
                $("<td>").append(
                    $("<a>").attr("href", "Asset\Rules\Rule.html\#"+rule).text(rule)
                ),
                $("<td>").append(
                    $("<span>").addClass("highlight")
                               .text("<"+this.nodeName.toLowerCase()+">"),
                    " is not allowed inside the ",
                    $("<span>").addClass("highlight").text("<"+parent+">"),
                    " element"
                ),
                $("<td>").addClass(className).text(errorType)
            )
        );
    });
}

table { border-collapse: collapse }
td { border: 1px solid; padding: 5px }

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

Answer 2

您可以做的是循环遍历您选择的 parent 元素的 child 元素。在这种情况下，您的 parent 元素是 "places".

您可以使用 javascript 函数 .tagName 获取 child 的元素类型。然后，您可以围绕它构建一个条件来检查允许/不允许的 child(ren).

示例：

var rd = new FileReader();
var xmlDoc = $.parseXML(this.result);                   
var $xml = $(xmlDoc);
var classname='errorClass';

function check_allowed_direct_child(x="places",
        y="Tirunelveli,Tiruchendur,Alwar",
                                    rule="RULE_002",
                                    error_type="Fail") {
    var notAllowedChild='sweet';
    var child_array=y.split(",");
    for(i=0; child_array.length > i; i++) {
        if(child_array[i] != notAllowedChild) {
     alert(child_array[i]+' is an allowed child');
 }
    }
    $(''+x).children().each(function () {
        var elements=this.tagName.toLowerCase();
 if(elements == notAllowedChild) {
     alert(elements+' is not an allowed child');
            $("#validation_report").append('<tr class="err"><td><a href="#">'+rule+'</td><td><span class="highlight">&#x0003C;'+elements+'&#x0003E;</span> is not allowed inside the <span class="highlight">&#x0003C;'+x+'&#x0003E;</span> element</td><td class="'+classname+'">'+error_type+'</td></tr>');
 }
    });
}

table, th, td {
   border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<places>
  <Tirunelveli>XXXX</Tirunelveli>
  <Tiruchendur></Tiruchendur>
  <Alwar></Alwar>
  <sweet></sweet>
</places>
<table id="validation_report"></table>
<br />
<button onclick="check_allowed_direct_child();">Test</button>

如何使用 JQuery 在 xml 中获取指定标签的直接子代

How to get the direct children of a specified tag in xml using JQuery

javascript

xml

jquery

children

xml-documentation