Javascript 尝试使用每个

我有一个xml文件：-

<child_2 entity_id="2" value="Root" parent_id="1">
    <child_4 entity_id="4" value="Activities" parent_id="2">
        <child_10066 entity_id="10066" value="Physical1" parent_id="4">
            <child_10067 entity_id="10067" value="Cricket" parent_id="10066">
                <child_10068 entity_id="10068" value="One Day" parent_id="10067"/>
            </child_10067>
        </child_10066>
        <child_10069 entity_id="10069" value="Test2" parent_id="4"/>
        <child_10070 entity_id="10070" value="Test3" parent_id="4"/>
        <child_10071 entity_id="10071" value="Test4" parent_id="4"/>
        <child_10072 entity_id="10072" value="Test5" parent_id="4"/>
        <child_5 entity_id="5" value="Physical" parent_id="4"/>
    </child_4>
</child_2>

这是我的完整代码：-

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script>

    function load()
    {
            $.ajax({ type: "GET", 
            async: false, 
            url: "reg.xml", 
            dataType: "xml", 
            success: function(xml){ 
            makeHTML(xml,'child_4', $('ul'));
    } 
        }); 
    }
 function makeHTML(xml,parent, $ul) {

 $(xml).find(parent).children().each(function() {

            var $node =  $(this) ;

            var $li = $('<li></li>').html( $node.attr('value') );

            $ul.append( $li ); 

            if ( $node.children().length > 0 ) {

                 $childUl = $('<ul></ul>').hide(); 

                 $ul.append( $childUl ); 

                 // toggle hide and show
                 $li.click( function(){

                        if( $(this).next().css('display') == 'none') {
                            $(this).next().show();
                        } else {
                            $(this).next().hide();
                        }  
                 });

                 makeHTML( $node.attr('tagName'), $childUl );
            }                        

    }); 
} 
    </script>

函数加载（）
{
$.ajax（{type:“GET”，
async:false，
url:“reg.xml”，
数据类型：“xml”，
成功：函数（xml）{
makeHTML（xml，'child_4'，$（'ul'））；
} 
}); 
}
函数makeHTML（xml，父级，$ul）{
$（xml）.find（parent）.children（）.each（function（））{
var$node=$（这个）；
var$li=$（'
'）.html（$node.attr（'value'））；
$ul.附加（$li）；
如果（$node.children（）.length>0）{
$childUl=$（“
”）.hide（）；
$ul.附加（$childUl）；
//切换隐藏和显示
$li.单击（函数（）{
if（$（this）.next（）.css（'display'）=='none'）{
$（this.next（）.show（）；
}否则{
$（this.next（）.hide（）；
}  
});
makeHTML（$node.attr（'tagName'），$childUl）；
}                        
}); 
} 

单击不起作用…
请帮我解决这个问题…

您的参数是

makeHTML($( xml ),'child_4', $('ul'));  //<-- here xml as jquery object

应该是

function makeHTML($xml,parent, $ul) {
  $xml.find(parent).children().each(function() {
   .....

已更新

委派您的单击功能

 $(document).on('click',$li,function(){
      if( $(this).next().css('display') == 'none') {
     ....

但是，我建议您将其委托给文档中最接近的静态元素，然后再委托给文档本身

---

要了解更多关于

的信息，我认为问题在于您正在用Jquery风格封装对象。试试这个

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script>

    function load()
    {
            $.ajax({ type: "GET", 
            async: false, 
            url: "reg.xml", 
            dataType: "html", 
            success: function(data){ 
            var xml = data ; 
            makeHTML($(xml),'child_4', $('ul'));
    } 
        }); 
    }
 function makeHTML($xml,parent, $ul) {

 $xml.find(parent).children().each(function() {

            var $node =  $(this) ;

            var $li = $('<li></li>').html( $node.attr('value') );

            $ul.append( $li ); 

            if ( $node.children().length > 0 ) {

                 $childUl = $('<ul></ul>').hide(); 

                 $ul.append( $childUl ); 

                 // toggle hide and show
                 // use live for dynamically added DOM elements
                 $li.live("click", function(){
                        //toggle the current li visibility
                        $(this).toggle();
                 });

                 makeHTML( $node.attr('tagName'), $childUl );
            }                        

    }); 
} 
    </script>

函数加载（）
{
$.ajax（{type:“GET”，
async:false，
url:“reg.xml”，
数据类型：“html”，
成功：函数（数据）{
var xml=数据；
makeHTML（$（xml），'child_4'，$（'ul'）；
} 
}); 
}
函数makeHTML（$xml，parent，$ul）{
$xml.find（parent）.children（）.each（function（））{
var$node=$（这个）；
var$li=$（'
'）.html（$node.attr（'value'））；
$ul.附加（$li）；
如果（$node.children（）.length>0）{
$childUl=$（“
”）.hide（）；
$ul.附加（$childUl）；
//切换隐藏和显示
//对动态添加的DOM元素使用live
$li.live（“单击”，函数（）{
//切换当前li可见性
$（this.toggle（）；
});
makeHTML（$node.attr（'tagName'），$childUl）；
}                        
}); 
} 

使用jQuery.parseXML不是更容易吗？

看看ObjTree——它可以帮助您简单地将xml转换为obj

例如：

/*
 here xml is 
 <addressbook>
    <contact    first='chris'
                last='thatcher'
                cell='555-555-5555'
                fax='444-444-4444'>
        <address    line1='po box 1234'
                    city='shepherdstown'
                    state='WV'
                    zipcode='25425'/>
    </contact>
    <contact    first='ariel'
                last='flesler'
                cell='222-222-2222'>
        <address    line1='123 smart way'
                    city='new york'
                    state='NY'
                    zipcode='34526'/>
    </contact>
    <contact    first='yusuke'
                last='kawasaki'
                cell='888-888-8888'
                fax='999-999-9999'>
        <address    line1='po box 8765'
                    city='san fransisco'
                    state='CA'
                    zipcode='87654'/>
    </contact>
 </addressbook>
*/
$.get(url, function(xml){
    var addressbook = _.xml2js(xml).addressbook;
    //addressbook is now object
});

/*
这里是xml
*/
$.get（url，函数（xml）{
var addressbook=ux.xml2js（xml）.addressbook；
//地址簿现在是对象
});

您的XML是否有根节点？我已经解决了第一个问题，但现在单击事件不起作用。。。请检查我是否已更新我的问题。。。谢谢我的点击是工作我试图提醒如果点击它的工作，但问题是没有显示在那里，如果孩子click@jacklanza，请检查我的最新答案。您可能需要使用

toggle（）

我已经解决了第一个问题，但现在单击事件不起作用。。。请检查我是否已更新我的问题。。。thanks@jacklanza你是说，

单击

事件没有被触发？这是因为您正在将

动态添加到

DOM

，在这种情况下，您必须使用“live（）”，请查看我的更新答案

/*
 here xml is 
 <addressbook>
    <contact    first='chris'
                last='thatcher'
                cell='555-555-5555'
                fax='444-444-4444'>
        <address    line1='po box 1234'
                    city='shepherdstown'
                    state='WV'
                    zipcode='25425'/>
    </contact>
    <contact    first='ariel'
                last='flesler'
                cell='222-222-2222'>
        <address    line1='123 smart way'
                    city='new york'
                    state='NY'
                    zipcode='34526'/>
    </contact>
    <contact    first='yusuke'
                last='kawasaki'
                cell='888-888-8888'
                fax='999-999-9999'>
        <address    line1='po box 8765'
                    city='san fransisco'
                    state='CA'
                    zipcode='87654'/>
    </contact>
 </addressbook>
*/
$.get(url, function(xml){
    var addressbook = _.xml2js(xml).addressbook;
    //addressbook is now object
});