Question

这是我的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>

这是我的代码： -

<script>
data = false;


$(document).ready(function() {
    $("li").live("click", function(event) {
    /*if (event.target.id === '9426') {
        //$(this).unbind('click');
        alert('this is last !!')
        */
    $("li").hide();
        event.cancelBubble = true;
        loadChild($(this).attr("id"), event);
        return false;
    })
});

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

    if(obj.data("loaded") == null) {
        ul = "<d>";
        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 + "'>" + value_text + "</li>";
         });
         ul += "</d>";

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

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

        });       //close each(      
    }
         }); //close $.ajax(
     }); //close click(
 }); //close $(
</script>
   </head>
   <body>
     <p>
       <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>
        </p>
</body>
</html>

使用此代码我点击任何值，它的声音可以隐藏。
但如果最后一个孩子没有子孩子，那么就不要隐藏了表示最后一个孩子没有点击事件... 谢谢大家帮助我......

Answer 1

试试这个

<强> Demo

$(document).ready(function() {
  $("ul").live("click", function(event) {
    if($(this).children().size() > 1){
      $(this).find('li').first().hide();
      event.cancelBubble = true;
      loadChild($(this).attr("id"), event);
      return false;
    }    
 });
});

<ul>
   <li>Asia</li>
   <ul>
       <li>India</li>
       <ul>
          <li>Gujarat</li>
            <ul><li>Ahmedabad</li></ul>
       </ul>
  </ul>
</ul>

Answer 2

现在看到你的代码......

首先是一些提示，在现在的状态下，现在读取代码有点困难。

也许你可以考虑重写吗？记住少写，做更多。

重写并回答问题：

What should your code be doing?

Answer 3

您可以使用length来获取节点的子节点数。

我已经清理了你的代码：

<强> 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);
                    $(this).unbind('click');

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

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

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

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

        // Only if it contains children
        if( $(data).find(path).children().length > 0) {
            $("li").hide();
            $("#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 += "</ul>";

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

输出（两次点击后）

<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</div>

如果父级没有元素，则取消绑定click事件

3 个答案: