javascript - 尝试使用每个查找元素表单 xml 文件

Question

我有一个 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>

单击不起作用...
请帮助我解决此问题...

Answer 1

你的参数是

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

并且您正在将 jquery 对象再次转换为 jquery 对象

     $(xml).find(parent).children().each(function() {
  //-^^---here

它应该是

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

更新

委托您的点击功能

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

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

链接阅读更多关于

Answer 2

查看 ObjTree - 它可以帮助您简单地将 xml 转换为 obj https://github.com/thatcher/jquery-objtree

例子：

/*
 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
});

Answer 3

我认为问题在于您将对象封装在 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>

Answer 4

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