Question

我有这样的XML：

<MenuRoot>
<menu0>Home</menu0>
<menu0 submenu="true"><name>About</name>
    <menu1>History</menu1>
    <menu1 submenu="true"><name>Within 40 years..</name>
        <menu2 submenu="true"><name>Where we are today</name>
            <menu3 submenu="true"><name>Vision of tomorrow</name>
                <menu4>Vision and Mission</menu4>
            </menu3>
        </menu2>
        <menu2>Gallery</menu2>
        <menu2>Contact Us</menu2>
    </menu1>
</menu0>
<menu0>About</menu0>
</MenuRoot>

我正在使用此递归代码加载它：

$(document).ready(function()
 {
     $.ajax({
         type: "GET",
         url: "/static/menu_.xml",
         dataType: "xml",
         success: function(xml) {
         html = nodeMarkup(xml.documentElement);
         document.getElementById('menulist').innerHTML = html;}
         })
 });

function nodeMarkup( node ){
    if( node.childNodes.length ) {
        var list = '', header = '';
        for( var index = 0; index < node.childNodes.length; index++ ) {
            if( node.childNodes[index].tagName == 'name' ) {
                header = node.childNodes[index].textContent;
            } else {
                list += nodeMarkup( node.childNodes[index] );
            };
        };
        return node.hasAttribute('submenu')
            ? '<li>' + header + '<ul>' + list + '</ul></li>'
            : list;
    } else {
        return '<li>' + node.textContent + '</li>';
    };
};

我在here中获得了这个递归代码，并修改了加载XML的部分。但是，当我通过ajax加载XML时，我得到了不同的结果。输出是这样的：

＆＃13;

<ul id="menulist"><li>
</li><li>Home<ul></ul></li><li>
</li><li>About<ul><li>
    </li><li>History</li><li>
    </li><li>Within 40 years..<ul><li>
        </li><li>Where we are today<ul><li>
            </li><li>Vision of tomorrow<ul><li>
                </li><li>Vision and Mission</li><li>
            </li></ul></li><li>
        </li></ul></li><li>
        </li><li>Gallery</li><li>
        </li><li>Contact Us</li><li>
    </li></ul></li><li>
</li></ul></li><li>
</li><li>About</li><li>
</li></ul>

＆＃13;

但是当我通过变量手动添加XML时，它会像这样正确加载，正如我想要的那样：

＆＃13;

<ul id="menulist">
  <li>Home</li>
  <li>About
    <ul>
      <li>History</li>
      <li>Within 40 years..
        <ul>
          <li>Where we are today
            <ul>
              <li>Vision of tomorrow
                <ul>
                  <li>Vision and Mission</li>
                </ul>
              </li>
            </ul>
          </li>
          <li>Gallery</li>
          <li>Contact Us</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>About</li>
</ul>

＆＃13;

有人可以帮我这个吗？提前感谢您，我将不胜感激任何建议和意见

Answer 1

查看函数的代码，看来您正在使用node.childNodes.length, which is 7并使用索引。利用node.children.length which is 3。

function nodeMarkupOne( node ) {

    if ( node.children.length ) {
            var list = '', header = '';
            for ( var index = 0; index < node.children.length; index++ ) {
                    if ( node.children[index].tagName == 'name' ) {
                            header = node.children[index].textContent;
                    } else {
                            list += nodeMarkupOne(node.children[index]);
                    }
            }
            console.log(list);
            return node.hasAttribute('submenu') ? '<li>' + header + '<ul>' + list + '</ul></li>' : list;
    }  else {
            return '<li>' + node.textContent + '</li>';
    }
};

从xml导航菜单，javascript递归到HTML <ul>

1 个答案: