子DOM元素的递归函数

Question

我正在尝试使用递归函数来显示/隐藏DOM上的多个嵌套UL / LI元素。

我有一个适用于单个嵌套的函数，但是我试图使用递归函数来控制x个嵌套元素的数量。

这是我目前拥有的：

的HTML

<section data-range="true">
  <input type="range">
  <ul>
    <li>Item one</li>
    <li>Item two</li>
    <ul>
      <li>Nestd two-one</li>
      <li>Nestd two-two</li>
      <ul>
        <li>Double-nested one</li>
      </ul>
    </ul>
    <li>Item three</li>
  </ul>
</section>

JS：

/*  eventListener
 *  Attach an event listener to this element
 *
 *  @param Object - Event object
*/
function eventListener(el) {
  el.addEventListener('change', function(e) {
      // List
      else if (el.parentNode.children[1].nodeName == "UL" || el.parentNode.children[1].nodeName == "OL") {
          updateList(e, el.value);
      }
  });
}

/*  updateList
 *
 *  @param Object - Event object
 *  @param Real - Range value (i.e. 3.2)
*/
function updateList(e, range) {
    var target = e.srcElement || e.target;
    var list = target.nextSibling.nextElementSibling;
    var listNumber = list.childElementCount;

    displayChildren(list, listNumber);
}

/*  displayChildren
 *
 *  @param Object - Event object
*/
function displayChildren(list, listNumber) {

    for (var i = 0; i < listNumber; i++) {
        if (list.children[i].nodeName != 'UL') {
            list.children[i].style.display = (list.children[i].getAttribute('data-position') <= range) ? "":"none";
        }
        if (list.children[i].children.length > 0) {
            displayChildren(list.children[i], list.children[i].childElementCount);
        }
    }
}

以下是一些实时示例：

• 具有嵌套元素递归功能的JSbin 。
• 具有工作嵌套元素的JSbin 。

任何有用的提示表示赞赏。

Answer 1

好吧，您只需省略一些参数。 :)

检查它JsBin

function updateList(e, range) {
  ...
  displayChildren(list, listNumber, range); // add range param.
}

function displayChildren(list, listNumber, range) { // and here
  ...
  displayChildren(list.children[i], list.children[i].childElementCount, range); // and here.

为什么不使用jQuery？ 无论如何，这是很不错的脚本，祝您好运:)

----编辑

您的数据位置和输入范围的值不是“数字”，而是“字符串”。

因此，如果有10个以上的“ UL”元素，则将其与“ 10”和“ 4”进行比较（“ 4”是更大的值）

JsBin（工作演示）

要解决此问题，请先将其转换为数字类型，然后再进行比较

function eventListener(el) {
  ...
  updateList(e, parseInt(el.value));


function displayChildren(list, listNumber, range) {
  ...
  // Now range is Number. (and LHS will converted with number)
  list.children[i].style.display = (list.children[i].getAttribute('data-position') <= range) ? "":"none";

我认为您已经知道了，请检查一下:) Javascript字符串/整数比较

----再次编辑

如果您只想显示和隐藏“ LI”元素，该怎么办？

var Range = function(step) {
  var rangeElements = document.querySelectorAll("[data-range]");

  for(var i = 0; i < rangeElements.length; i++) {
    var el = rangeElements[i];
    var inputRange = el.children[0]; // input type="range"
    var sectionRange = el.children[1]; // root UL

    inputRange.min = 0;
    inputRange.max = inputRange.value = sectionRange.getElementsByTagName('LI').length;
    inputRange.step = Number(step) || 1;

    // for better UX use oninput event.
    inputRange.addEventListener('input', function(e) {
      var el = e.target;
      var rangeItems = el.parentNode.children[1].getElementsByTagName('LI');
      var range = Number(el.value);
      for(var i = 0; i < rangeItems.length; i++) { rangeItems[i].style.display = i < range ? '' : 'none'; }
    });
  }
  return rangeElements;
}