Question

我有一个简单的html结构，我需要遍历。由于某种原因，我的递归函数在任何嵌套节点上返回'undefined'，但不对父节点返回。不幸的是，这需要是原生的js，没有jQuery。谢谢！

HTML：

<div id="container">
  <div id="head"> 
    <span id="left"><</span> 
    <span id="right">></span> 
  </div>
</div>

脚本：

var h = hasId(container, 'head');
var l = hasId(container, 'left');
var r = hasId(container, 'right');

console.log(h + " : " + r + " : " + l);
//[object HTMLDivElement] : undefined : undefined

function hasId(ele, id) {
    for (var i = 0; i < ele.childNodes.length; i++) {
        var child = ele.childNodes[i];
        if(child.id == id) return child;
        else hasId(child, id);
    }
}

Answer 1

您只是在递归调用上调用return。此外，您应该测试其结果是否已定义。如果是，您可以退货，或者如果没有则继续循环。

var h = hasId(container, 'head');
var l = hasId(container, 'left');
var r = hasId(container, 'right');

console.log(h + " : " + r + " : " + l);
//[object HTMLDivElement] : undefined : undefined

function hasId(ele, id) {
    for (var i = 0; i < ele.childNodes.length; i++) {
        var child = ele.childNodes[i];
        if(child.id == id) return child;
        else {
          var next = hasId(child, id);
          if(next) return next;
        };
    }
}

Answer 2

else子句应该return hasId(child, id)的值，但前提是该值本身已定义，否则必须继续循环。

如果没有return，该函数将递归，但不会给出答案。

Answer 3

你可以这样解决：

var h = hasId(container, 'head');
var l = hasId(container, 'left');
var r = hasId(container, 'right');

console.log(h + " : " + r + " : " + l);

function hasId(ele, id) {
    for (var i = 0; i < ele.childNodes.length; i++) {
        var child = ele.childNodes[i];
        if(child.id == id || (child = hasId(child, id))){
           return child;
        }
    }
    return false;
}

JavaScript +递归函数返回undefined

3 个答案: