javascript - 递归 JQuery 以在文本中格式化 HTML 节点值

Question

function insideNest(theindex, count) {
  count++;
  console.log("(\n)");
  if (theindex == null) {
    theindex = $(document);
  }
  $(theindex).children("#nest").each(function() {
    $(this).children("#value").each(function() {
      $(this).children("input").each(function() {
        for (i = 0; i < count; i++) {
          console.log("\t");
        }
        console.log($(this).val() + "\n");
      });
    });
    insideNest($(this));
  });
  console.log(")\n)");
}
$(document).ready(function() {
  insideNest($(this), -1);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nest">
  <div id="value">
    <input type="text" id="hasvalue" value="level1" />
  </div>
  <div id="value">
    <input type="text" id="hasvalue" value="level1" />
  </div>
  <div id="value">
    <input type="text" id="hasvalue" value="level1" />
  </div>
  <div id="nest">
    <div id="value">
      <input type="text" id="hasvalue" value="level2" />
    </div>
    <div id="value">
      <input type="text" id="hasvalue" value="level2" />
    </div>
    <div id="nest">
      <div id="value">
        <input type="text" id="hasvalue" value="level3" />
      </div>
    </div>
    <div id="value">
      <input type="text" id="hasvalue" value="level2" />
    </div>
  </div>
  <div id="value">
    <input type="text" id="hasvalue" value="level1" />
  </div>
  <div id="value">
    <input type="text" id="hasvalue" value="level1" />
  </div>
</div>

我的输出:

(
)
)
)

预期输出:

level1
level1
level1
(
  level2
  level2
  (
    level3
  )
  level2
)
level1
level1

我想获取 input 字段中的值，并且括号仅在嵌套 #nest 时才开始。我尝试在 javascript 找到 #nest 时调用相同的函数，并在找到 #value 时打印输出。我认为诀窍是只找到 nest 的一级 child fiddle :https://jsfiddle.net/2fq8u8wk/

Answer 1

我不知道您的错误的确切性质，因为我不想尝试分析 jQuery 的行为方式。

相反，重写更容易。这是一个简单的递归函数，它使用 native API 来执行您想要的操作。

function indent(n) { return "\t".repeat(n) }
function print(depth, s) { console.log(indent(depth) + s) }

function walk(root, depth) {
  print(depth, "(")
  
  for (const ch of root.children) {
    if (ch.matches(".value")) {
      print(depth + 1, ch.firstElementChild.value)

    } else if (ch.matches(".nest")) {
      walk(ch, depth + 1)
    }
  }
  print(depth, ")")
}

// Run after the DOM is loaded
document.addEventListener("DOMContentLoaded", function() {
  walk(document.body.querySelector(".nest"), 0)
})

<div class="nest">
  <div class="value">
    <input type="text" class="hasvalue" value="level1" />
  </div>
  <div class="value">
    <input type="text" class="hasvalue" value="level1" />
  </div>
  <div class="value">
    <input type="text" class="hasvalue" value="level1" />
  </div>
  <div class="nest">
    <div class="value">
      <input type="text" class="hasvalue" value="level2" />
    </div>
    <div class="value">
      <input type="text" class="hasvalue" value="level2" />
    </div>
    <div class="nest">
      <div class="value">
        <input type="text" class="hasvalue" value="level3" />
      </div>
    </div>
    <div class="value">
      <input type="text" class="hasvalue" value="level2" />
    </div>
  </div>
  <div class="value">
    <input type="text" class="hasvalue" value="level1" />
  </div>
  <div class="value">
    <input type="text" class="hasvalue" value="level1" />
  </div>
</div>

我确实将您的 id 属性更改为 class，因为 ID 在文档中应该是唯一的。鉴于我上面的重写，我们可以摆脱 ID，但它仍然不是很好。