Jquery 如何在div路径值上设置click事件，如果单击路径值，则在div中显示它的子项

这是一个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>

这是我的jquery文件：-

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

    if(obj.data("loaded") == null) {
        ul = "<d>";
        var path = (id == 0) ? "root" : "[entity_id='" + id + "']";

        // Only if it contains children
        if( $(data).find(path).children().length > 0) {
            $("li").hide();
            if($(this).data("loaded") == null) {
            $("#path").text($("#path").text()  + obj.text()+ " => ");
        }
        }

        $(data).find(path).children().each(function(){
            var value_text = $(this).attr('value');
            var id = $(this).attr('entity_id');
            ul += "<li id='" + id + "'>" + value_text + "</li>";
        });

        ul += "</d>";

        $("#" + id).before(ul);
        obj.data("loaded", true);
    } else {
        $("#" + id + " ul").remove();
        //obj.data("loaded", null);
    }
}

 $(document).ready(function() {
     $('#loader').click(function() {
     $(this).hide();
      $.ajax({
             type: "GET",
             url: "try.xml",
             dataType: "xml",
             success: function(xml) {
                data = xml;
                ul = $("<d></d>");
                //loadChild("0");
                $(xml).find('child1').each(function(){
                var value_text = $(this).attr('value');
                var id = $(this).attr('entity_id');
                li=$("<li id='" + id + "'></li>");
                             li.html(value_text);
                             ul.append(li);
                             $(this).unbind('click');
                });
                             ul.appendTo('#firstLevelChild');
    }
         }); //close $.ajax(
     }); //close click(
     $(document).on("click", "li", function(event) {

        event.stopPropagation();
        loadChild($(this).attr("id"), event);
        return false;
 });
 });

data=false；
函数loadChild（id）{
var obj=$（“#”+id）；
如果（对象数据（“加载”）==null）{
ul=“”；
变量路径=（id==0）？“根”：“[entity_id=”+id+”]；
//只有当它包含子项时
if（$（数据）.find（路径）.children（）.length>0）{
$（“li”）.hide（）；
if（$（this）.data（“已加载”）==null）{
$（“#路径”）.text（$（“#路径”）.text（）+obj.text（）+“=>”）；
}
}
$（数据）.find（路径）.children（）.each（函数（））{
var value_text=$（this.attr（'value'）；
var id=$（this.attr（'entity_id'）；
ul+=“
“+value\u text+”
”；
});
ul+=”；
$（“#”+id.）（ul）之前；
对象数据（“已加载”，真实）；
}否则{
$（“#”+id+“ul”）.remove（）；
//对象数据（“已加载”，空）；
}
}
$（文档）.ready（函数（）{
$（“#加载程序”）。单击（函数（）{
$（this.hide（）；
$.ajax({
键入：“获取”，
url:“try.xml”，
数据类型：“xml”，
成功：函数（xml）{
数据=xml；
ul=$（“”）；
//loadChild（“0”）；
$（xml）.find（'child1'）.each（function（）{
var value_text=$（this.attr（'value'）；
var id=$（this.attr（'entity_id'）；
li=$（“
”）；
html（值\文本）；
ul.附加（li）；
$（this.unbind（'click'）；
});
ul.附录（“#firstLevelChild”）；
}
})；//关闭$.ajax(
})；//关闭单击(
$（文档）。在（“单击”、“li”上，函数（事件）{
event.stopPropagation（）；
loadChild（$（this.attr（“id”），事件）；
返回false；
});
});

这是我的html文件：-

<div id="path">
</div>
<div id="1">
<span  id='update-target'>Click here to load value</span>
<ol id="0"></ol>
</div>
<div id="firstLevelChild">
<ol id="0"></ol>
</div>

单击此处加载值

我的输出是这样的：

<div id="firstLevelChild">
    <ul>
        <li id="1" style="display: none;">Asia</li>
        <ul>
            <li id="2" style="display: none;">india</li>
            <ul>
                <li id="3">Gujarat</li>
                <li id="4">Rajshthan</li>
            </ul>
        </ul>
    </ul>
</div>
<div id="path">  Asia => india => Gujarat =></div><br>

亚洲

印度

古吉拉特邦
拉吉什坦



亚洲=>印度=>古吉拉特邦=>

如果我点击div路径值，如印度，则路径中仅显示亚洲
然后，印度躺在另一个沙发上

像

亚洲=>印度=>古吉拉特邦=>

如果单击India，则输出显示如下内容

<div id="path"> Asia =>
<div id="firstLevelChild">
<d><li id="2"> Inida </li></d>
</div>

Asia=>
Inida

类似于反向过程的东西

---

谢谢：）

我为您提供了一个解决方案，但您需要修复代码才能正常工作

工作代码

HTML

<body>
    <div id="loader">
        <span id='update-target'>Click here to load value</span>
    </div>

    <div id="firstLevelChild"></div>

    <div id="path"></div>
</body>

单击此处加载值

jQuery

data = false;

$(document).ready(function() {
    $('#loader').click(function() {
        $(this).hide();
        $.ajax({
            type: "GET",
            url: "./final.xml",
            dataType: "xml",
            success: function(xml) {
                data = xml;
                ul = $("<ul></ul>");
                $(xml).find('child1').each(function(){
                    var value_text = $(this).attr('value');
                    var id = $(this).attr('entity_id');
                    li = $("<li id='" + id + "'></li>");
                    li.html(value_text);

                    ul.append(li);
                });       //close each(      
                ul.appendTo('#firstLevelChild');
            }
        }); //close $.ajax(
    }); //close click(

    $(document).on("click", "li", function(event) {
        event.stopPropagation();
        loadChild($(this).attr("id"), false);
        return false;
    });

    $(document).on("click", "span.paths", function(event) {
        event.stopPropagation();
        id = $(this).attr("id").replace("path_","");
        $(this).nextAll("span").remove();
        $(this).remove();
        loadChild(id, true);
        return false;
    });
});

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

    if(obj.data("loaded") == null || path) {
        ul = "<ul>";
        var path = (id == 0) ? "root" : "[entity_id='" + id + "']";

        // Only if it contains children
        if( $(data).find(path).children().length > 0) {
            $("li").hide();
            $("span #path_" + id).remove();
            p = $("<span id=\"path_" + id + "\" class=\"paths\">" + obj.text() + " => </span>"); 
            $("#path").append(p);
        }

        $(data).find(path).children().each(function(){
            var value_text = $(this).attr('value');
            var id = $(this).attr('entity_id');
            $("#" + id).remove();
            ul += "<li id='" + id + "'>" + value_text + "</li>";
        });

        ul += "</ul>";

        obj.after(ul);
        obj.data("loaded", true);
    } else {
        $("#" + id + " ul").remove();
        obj.data("loaded", null);
    }
}

data=false；
$（文档）.ready（函数（）{
$（“#加载程序”）。单击（函数（）{
$（this.hide（）；
$.ajax({
键入：“获取”，
url:“./final.xml”，
数据类型：“xml”，
成功：函数（xml）{
数据=xml；
ul=$（“
”）；
$（xml）.find（'child1'）.each（function（）{
var value_text=$（this.attr（'value'）；
var id=$（this.attr（'entity_id'）；
li=$（“
”）；
html（值\文本）；
ul.附加（li）；
})；//关闭每个（
ul.附录（“#firstLevelChild”）；
}
})；//关闭$.ajax(
})；//关闭单击(
$（文档）。在（“单击”、“li”上，函数（事件）{
event.stopPropagation（）；
loadChild（$（this.attr（“id”），false）；
返回false；
});
$（文档）.on（“单击”，“跨距路径”，函数（事件）{
event.stopPropagation（）；
id=$（this.attr（“id”）.replace（“path_uu”）；
$（this.nextAll（“span”）.remove（）；
$（this.remove（）；
loadChild（id，true）；
返回false；
});
});
函数loadChild（id，路径）{
var obj=$（“#firstLevelChild#”+id）；
if（对象数据（“加载”）==null | |路径）{
ul=“
”；
变量路径=（id==0）？“根”：“[entity_id=”+id+”]；
//只有当它包含子项时
if（$（数据）.find（路径）.children（）.length>0）{
$（“li”）.hide（）；
$（“span#path"+id）.remove（）；
p=$（“”+obj.text（）+“=>”）；
$（“#路径”）。追加（p）；
}
$（数据）.find（路径）.children（）.each（函数（））{
var value_text=$（this.attr（'value'）；
var id=$（this.attr（'entity_id'）；
$（“#”+id）.remove（）；
ul+=“
“+value\u text+”
”；
});
ul+=“
”；
obj.后（ul）；
对象数据（“已加载”，真实）；
}否则{
$（“#”+id+“ul”）.remove（）；
对象数据（“已加载”，空）；
}
}

请创建一个如何在fiddle中添加xml文件？抱歉……您的问题是什么？您希望Rajkot在路径中？1）。不希望Rajkot在路径2中）。如果单击路径任意值，则其显示在那里。如果您不介意，我有一个演示，然后如果您提供邮件id，我将通过电子邮件发送给您。有多个元素具有相同id，请检查第三个代码块。（Y）是的，这正是我需要的…感谢男士鼓掌YOU@JackPhp乐于助人，无需大喊大叫：）

data = false;

$(document).ready(function() {
    $('#loader').click(function() {
        $(this).hide();
        $.ajax({
            type: "GET",
            url: "./final.xml",
            dataType: "xml",
            success: function(xml) {
                data = xml;
                ul = $("<ul></ul>");
                $(xml).find('child1').each(function(){
                    var value_text = $(this).attr('value');
                    var id = $(this).attr('entity_id');
                    li = $("<li id='" + id + "'></li>");
                    li.html(value_text);

                    ul.append(li);
                });       //close each(      
                ul.appendTo('#firstLevelChild');
            }
        }); //close $.ajax(
    }); //close click(

    $(document).on("click", "li", function(event) {
        event.stopPropagation();
        loadChild($(this).attr("id"), false);
        return false;
    });

    $(document).on("click", "span.paths", function(event) {
        event.stopPropagation();
        id = $(this).attr("id").replace("path_","");
        $(this).nextAll("span").remove();
        $(this).remove();
        loadChild(id, true);
        return false;
    });
});

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

    if(obj.data("loaded") == null || path) {
        ul = "<ul>";
        var path = (id == 0) ? "root" : "[entity_id='" + id + "']";

        // Only if it contains children
        if( $(data).find(path).children().length > 0) {
            $("li").hide();
            $("span #path_" + id).remove();
            p = $("<span id=\"path_" + id + "\" class=\"paths\">" + obj.text() + " => </span>"); 
            $("#path").append(p);
        }

        $(data).find(path).children().each(function(){
            var value_text = $(this).attr('value');
            var id = $(this).attr('entity_id');
            $("#" + id).remove();
            ul += "<li id='" + id + "'>" + value_text + "</li>";
        });

        ul += "</ul>";

        obj.after(ul);
        obj.data("loaded", true);
    } else {
        $("#" + id + " ul").remove();
        obj.data("loaded", null);
    }
}