javascript - 递归函数中的 return 并不退出函数

Question

我很难修复我的递归函数，这是一个简化的工具，用于扫描 DOM 项并在文档中的某个位置找到匹配元素时返回匹配元素。

find: function(selector, element) {
    if(selector !== undefined) {
        if(element === undefined) {
            element = this.e;
        }
        var elements = element.childNodes;
        for(var i = 0; i < elements.length; i++) {
            if(elements[i].nodeType === 1) {
                console.log(elements[i]);
                if(this.has_class(selector, elements[i]) === true) {
                    console.log('YAY, found it', elements[i]);
                    return elements[i];
                } else {
                    if(elements[i].childNodes.length > 0) {
                        this.find(selector, elements[i]);
                    }
                }
            }
        }
    }
    return false;
}

因此该函数应该扫描给定 DOM 元素的子元素(也可能是它们的子元素)并返回找到的元素，否则更深入并重试。

这是可调试的 DEMO .

正如您在日志中看到的，它触发了 console.log('found');但它并没有让函数返回它，而是继续并最终返回 false (截至未找到)。如何解决？

var tools = {

  e: document.querySelector('.breadcrumbs'),

  has_class: function(name, element) {
    if (element.className === name) {
      return true;
    }
    return false;
  },

  find: function(selector, element) {
    if (selector !== undefined) {
      if (element === undefined) {
        element = this.e;
      }
      var elements = element.childNodes;
      for (var i = 0; i < elements.length; i++) {
        if (elements[i].nodeType === 1) {
          console.log(elements[i]);
          if (this.has_class(selector, elements[i]) === true) {
            console.log('YAY, found it', elements[i]);
            return elements[i];
          } else {
            if (elements[i].childNodes.length > 0) {
              this.find(selector, elements[i]);
            }
          }
        }
      }
    }
    return false;
  }

};

console.log(tools.find('test'));

<div class="breadcrumbs" data-active="true">
  <div class="bc_navigation" onclick="events.bc_toggle(event, this);">
    <span class="bc_arrow"></span>
  </div>
  <div class="bc_content">
    <div class="bc_wrapper">
      <div class="step">
        <span class="dot"></span><a onclick="events.go_home(event, this);">Landing</a>
      </div>
      <div class="step">
        <span class="dot"></span><a href="#prematch[prematch-sport][1|0|0|0|0]">Soccer</a>
      </div>
      <div class="step">
        <span class="dot"></span><a href="#prematch[prematch-group][1|4|0|0|0]">International</a>
      </div>
      <div class="step">
        <span class="dot"></span><a class="test" href="#prematch[prematch-event][1|4|16|10|0]">Int - World Cup</a>
      </div>
      <div class="step">
        <span class="dot"></span><a>Russia - Saudi Arabia</a>
      </div>
    </div>
  </div>
</div>

Answer 1

return 退出对找到元素的 find 的调用，但不会展开所有导致该元素的调用。

而不是

this.find(selector, elements[i]);

...在您的else中，您需要查看是否获得了该元素，如果是，则返回:

var result = this.find(selector, elements[i]);
if (result) {
    return result;
}

这让它沿着链向上传播。

更新的实例:

var tools = {

  e: document.querySelector('.breadcrumbs'),

  has_class: function(name, element) {
    if (element.className === name) {
      return true;
    }
    return false;
  },

  find: function(selector, element) {
    if (selector !== undefined) {
      if (element === undefined) {
        element = this.e;
      }
      var elements = element.childNodes;
      for (var i = 0; i < elements.length; i++) {
        if (elements[i].nodeType === 1) {
          console.log(elements[i]);
          if (this.has_class(selector, elements[i]) === true) {
            console.log('YAY, found it', elements[i]);
            return elements[i];
          } else {
            if (elements[i].childNodes.length > 0) {
              var result = this.find(selector, elements[i]);
              if (result) {
                return result;
              }
            }
          }
        }
      }
    }
    return false;
  }

};

console.log(tools.find('test'));

<div class="breadcrumbs" data-active="true">
  <div class="bc_navigation" onclick="events.bc_toggle(event, this);">
    <span class="bc_arrow"></span>
  </div>
  <div class="bc_content">
    <div class="bc_wrapper">
      <div class="step">
        <span class="dot"></span><a onclick="events.go_home(event, this);">Landing</a>
      </div>
      <div class="step">
        <span class="dot"></span><a href="#prematch[prematch-sport][1|0|0|0|0]">Soccer</a>
      </div>
      <div class="step">
        <span class="dot"></span><a href="#prematch[prematch-group][1|4|0|0|0]">International</a>
      </div>
      <div class="step">
        <span class="dot"></span><a class="test" href="#prematch[prematch-event][1|4|16|10|0]">Int - World Cup</a>
      </div>
      <div class="step">
        <span class="dot"></span><a>Russia - Saudi Arabia</a>
      </div>
    </div>
  </div>
</div>

这是递归函数的关键之一:当它们调用自身时，它们必须查看调用的结果并在适当的时候传播它。