Javascript 使用ajax获取所有子子孩子的属性值_Javascript_Jquery_Ajax_Xpath

Javascript 使用ajax获取所有子子孩子的属性值

javascript jquery ajax xpath

Javascript 使用ajax获取所有子子孩子的属性值,javascript,jquery,ajax,xpath,Javascript,Jquery,Ajax,Xpath,这是我的xml文件：- <root> <child1 entity_id = "1" value= "Asia"> <child2 entity_id = "2" value = "india"> <child3 entity_id = "3" value = "Gujarat"> <child5 entity_id = "5" value ="Rajkot"></child5>

这是我的xml文件：-

<root>
<child1 entity_id = "1" value= "Asia">
    <child2 entity_id = "2" value = "india">
        <child3 entity_id = "3" value = "Gujarat">
            <child5 entity_id = "5" value ="Rajkot"></child5>
        </child3>
        <child4 entity_id = "4" value = "Rajshthan">
            <child6 entity_id = "6" value = "Ajmer"></child6>
        </child4>
    </child2>
</child1>
</root>

这是我的密码：-

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
<script type="text/javascript" src="jquery.js"></script>
<script>
data = false;
loaded = false;

function loadChild(id) {
    if(!loaded) {
        ul = "<ul>";
        $(data).find("[entity_id='" + id + "']").children().each(function(){
             var value_text = $(this).attr('value');
             var id = $(this).attr('entity_id');

            ul += "<li id='" + id + "'>" + value_text + "</li>";
         });
         ul += "</ul>";
         $("#" + id).append(ul);
         loaded = true;
    }
}

 $(function() {
     $('#update-target a').click(function() {
         $.ajax({
             type: "GET",
             url: "final.xml",
             dataType: "xml",
             success: function(xml) {
                data = xml;
                //console.log(data);
                 $(xml).find('child1').each(function(){
                     var value_text = $(this).attr('value');
                     var id = $(this).attr('entity_id');
                     $("<li id='" + id + "' onclick=\"loadChild('" + id + "');\"></li>")
                         .html(value_text)
                         .appendTo('#update-target ol');
                 }); //close each(
             }
         }); //close $.ajax(
     }); //close click(
 }); //close $(
</script>
   </head>
   <body>
     <p>
       <div id='update-target'>
         <a href="#">Click here to load value</a>
         <ol></ol>
       </div>
     </p>

</body>
</html>


数据=假；
加载=错误；
函数loadChild（id）{
如果（！已加载）{
ul=“”；
$（数据）.find（“[entity_id=”“+id+“]”）]”.children（）.each（function（））{
var value_text=$（this.attr（'value'）；
var id=$（this.attr（'entity_id'）；
ul+=““+value\u text+””；
});
ul+=“”；
$（“#”+id）.append（ul）；
加载=真；
}
}
$（函数（）{
$（“#更新目标a”）。单击（函数（）{
$.ajax({
键入：“获取”，
url:“final.xml”，
数据类型：“xml”，
成功：函数（xml）{
数据=xml；
//控制台日志（数据）；
$（xml）.find（'child1'）.each（function（）{
var value_text=$（this.attr（'value'）；
var id=$（this.attr（'entity_id'）；
$（“”）
.html（值\文本）
.appendTo（“#更新目标ol”）；
})；//关闭每个(
}
})；//关闭$.ajax(
})；//关闭单击(
})；//关闭$(

我得到了如下输出：-

亚洲印度

我想要这样的输出：-

如果单击亚洲，则显示印度
如果单击印度，则显示古吉拉特邦和拉吉什坦
如果单击古吉拉特邦，则显示Rajkot

如果单击Rajshtan，然后首先显示Ajemr

，如果要连续单击子值，则需要在每个子列表项上添加您的loadChild函数作为单击事件。因此，不要使用此行

ul += "<li id='" + id + "'>" + value_text + "</li>";

ul += "<li id='" + id + "' onclick=\"loadChild('" + id + "');\">" + value_text + "</li>";

请注意，您需要避免的另一件事是，当单击子元素时，您希望避免父元素触发的onclick事件（可能发生这种情况，因为子元素嵌入父元素的li）元素中，因此您需要告诉浏览器不要使单击事件冒泡

event.cancelBubble = true;

最后，为了简化代码，实际上可以让updatetargeta的click处理程序调用loadChild函数，但使用id为0的“dummy”元素

请尝试以下代码：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
data = false;

function loadChild(id) {
    var obj = $("#" + id);

    if(obj.data("loaded") == null) {
        ul = "<ul>";
        var path = (id == 0) ? "root" : "[entity_id='" + id + "']";
        $(data).find(path).children().each(function(){
             var value_text = $(this).attr('value');
             var id = $(this).attr('entity_id');
             ul += "<li id='" + id + "' onclick=\"loadChild('" + id + "');\">" + value_text + "</li>";
         });
         ul += "</ul>";

         $("#" + id).append(ul);
         obj.data("loaded", true);
         event.cancelBubble = true;
    }
}

 $(function() {
     $('#update-target a').click(function() {
         $.ajax({
             type: "GET",
             url: "final.xml",
             dataType: "xml",
             success: function(xml) {
                data = xml;
                loadChild("0");
             }
         }); //close $.ajax(
     }); //close click(
 }); //close $(
</script>
   </head>
   <body>
     <p>
       <div id='update-target'>
         <a href="#">Click here to load value</a>
         <ol id="0"></ol>
       </div>
     </p>
</body>
</html>


数据=假；
函数loadChild（id）{
var obj=$（“#”+id）；
如果（对象数据（“加载”）==null）{
ul=“”；
变量路径=（id==0）？“根”：“[entity_id=”+id+”]；
$（数据）.find（路径）.children（）.each（函数（））{
var value_text=$（this.attr（'value'）；
var id=$（this.attr（'entity_id'）；
ul+=““+value\u text+””；
});
ul+=“”；
$（“#”+id）.append（ul）；
对象数据（“已加载”，真实）；
event.cancelBubble=true；
}
}
$（函数（）{
$（“#更新目标a”）。单击（函数（）{
$.ajax({
键入：“获取”，
url:“final.xml”，
数据类型：“xml”，
成功：函数（xml）{
数据=xml；
loadChild（“0”）；
}
})；//关闭$.ajax(
})；//关闭单击(
})；//关闭$(

很难理解你的问题和问题是什么。请更明确一些。@Candide我得到了一个亚洲输出，然后我点击了它的display there child value India，现在我想点击India，然后点击display there child value India，就像古吉拉特邦和拉什坦一样。这个问题被标记为xslt，但我在中看不到任何xslt问题（或答案！）.也许那个标签需要删除？@TimC我需要一些关于你答案的帮助你能帮我吗？你的答案是正确的，但我想在其中做一些更改，比如如果我单击“家长”，然后在那里显示“孩子”，在“家长隐藏”时显示“孩子”的位置…你能帮我解决这个问题吗喂！我现在很忙，恐怕，所以不知道w嗯，我可以帮你。但是如果你愿意，你可以随时在StackOverflow上问一个全新的问题，也许其他人可以帮忙。这是我的问题链接

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
data = false;

function loadChild(id) {
    var obj = $("#" + id);

    if(obj.data("loaded") == null) {
        ul = "<ul>";
        var path = (id == 0) ? "root" : "[entity_id='" + id + "']";
        $(data).find(path).children().each(function(){
             var value_text = $(this).attr('value');
             var id = $(this).attr('entity_id');
             ul += "<li id='" + id + "' onclick=\"loadChild('" + id + "');\">" + value_text + "</li>";
         });
         ul += "</ul>";

         $("#" + id).append(ul);
         obj.data("loaded", true);
         event.cancelBubble = true;
    }
}

 $(function() {
     $('#update-target a').click(function() {
         $.ajax({
             type: "GET",
             url: "final.xml",
             dataType: "xml",
             success: function(xml) {
                data = xml;
                loadChild("0");
             }
         }); //close $.ajax(
     }); //close click(
 }); //close $(
</script>
   </head>
   <body>
     <p>
       <div id='update-target'>
         <a href="#">Click here to load value</a>
         <ol id="0"></ol>
       </div>
     </p>
</body>
</html>