javascript - javascript递归迭代在递归迭代中返回整个父div
问题描述
我想在我的 div 上实现搜索功能，其 html 如下：
<input type="search" id="mysearch" placeholder="Search here" />
<div class="sken-cues-body" id="mydivbody">
<div class="sken-cue-card" style="display: block;" >
<div class="salesken-flex salesken-flex-column">
<div class="sken-cue-title">Welcome to My Customer!</div>
<div class="sken-cue-text">
Want to help every sales agent like a <b>champion !</b>
</div>
<div class="">
<a type="button" href="https://salesken.ai/sign-in.html" class="sken-button-theme">START HERE</a>
</div>
</div>
</div>
<div class="sken-cue-card salesken-flex" style="display: block;">
<div class="salesken-flex salesken-flex-column">
<div class="sken-cue-time">2:16 pm</div>
<div class="sken-cue-title">Talking Points</div>
<div class="sken-cue-text" id="11">
<ul >
<li>Greet the customer</li>
<li>Ask if it is a good time to talk</li>
<li>Be polite & courteous on the call</li>
<li>Listen carefully</li>
<li>Thank the customer for their time</li>
</ul>
<p></p>
</div>
</div>
</div>
<div class="sken-cue-card salesken-flex" style="display: block;">
<div class="salesken-flex salesken-flex-column">
<div class="sken-cue-time">2:16 pm</div>
<div class="sken-cue-title"></div>
<div class="sken-cue-text">
<p>
Introduce yourself and why you are calling, ask if it is a good time to talk<br>
</p>
</div>
</div>
</div>
<div class="sken-cue-card salesken-flex" style="display: block;">
<div class="salesken-flex salesken-flex-column">
<div class="sken-cue-time">2:16 pm</div>
<div class="sken-cue-title">
<p>
<span style="font-family: Arial; font-size: 13.3333px;">NPA Guidelines</span><br>
</p>
</div>
<div class="sken-cue-text">
<p>
If the account has not been active for more than 90 days, it will be declared an NPA and that will lead to strident actions. Need to start paying the EMIs to avoid unnecessary legal hassles<br>
<br>
</p>
</div>
</div>
</div>
</div>
对于实现搜索功能，我需要在 ID 为 mydivbody 的 div 内进行递归迭代。下面是用于在 ID 为 mydivbody 的 div 中进行递归迭代的 javascript 函数：
document.getElementById('mysearch').addEventListener('keyup',function(){
var node = document.getElementById('mydivbody')
allDescendants(node,this.value)
});
function allDescendants (node) {
for (var i = 0; i < node.children.length; i++) {
var child = node.children[i];
allDescendants(child);
console.log(child)
}
//doSomethingToNode(child,search_value);
}
但是在这个 js 函数中，我可以看到我正在安慰孩子的所有子节点以及整个父 div。对我来说，节点正在重复。请建议如何解决这个问题
解决方案
您的函数的递归迭代allDescendants()实际上是正确的并且不会生成重复项。如果你console.log()是一个元素，它也将包含它的子元素，这可能会让你对它包含重复项感到困惑。
我用一个实际的return和一个Level属性对其进行了扩展，以向您展示迭代是正确的。
function allDescendants(node, list, level){
//REM: To actually return elements, thos get stored in a list
var tList = list || [];
var tLevel = ~~level;
for(var i = 0; i < node.children.length; i++){
var child = node.children[i];
//REM: Store children in the list
tList.push({Level: tLevel, Element: child});
//REM: Took the log before the call, makes it more intuitive
//console.log(child);
allDescendants(child, tList, tLevel+1)
};
return tList
};
var tResult = allDescendants(document.querySelector('#mydivbody'));
console.log(tResult);<input type="search" id="mysearch" placeholder="Search here" />
<div class="sken-cues-body" id="mydivbody">
<div class="sken-cue-card" style="display: block;" >
<div class="salesken-flex salesken-flex-column">
<div class="sken-cue-title">Welcome to My Customer!</div>
<div class="sken-cue-text">
Want to help every sales agent like a <b>champion !</b>
</div>
<div class="">
<a type="button" href="https://salesken.ai/sign-in.html" class="sken-button-theme">START HERE</a>
</div>
</div>
</div>
<div class="sken-cue-card salesken-flex" style="display: block;">
<div class="salesken-flex salesken-flex-column">
<div class="sken-cue-time">2:16 pm</div>
<div class="sken-cue-title">Talking Points</div>
<div class="sken-cue-text" id="11">
<ul >
<li>Greet the customer</li>
<li>Ask if it is a good time to talk</li>
<li>Be polite & courteous on the call</li>
<li>Listen carefully</li>
<li>Thank the customer for their time</li>
</ul>
<p></p>
</div>
</div>
</div>
<div class="sken-cue-card salesken-flex" style="display: block;">
<div class="salesken-flex salesken-flex-column">
<div class="sken-cue-time">2:16 pm</div>
<div class="sken-cue-title"></div>
<div class="sken-cue-text">
<p>
Introduce yourself and why you are calling, ask if it is a good time to talk<br>
</p>
</div>
</div>
</div>
<div class="sken-cue-card salesken-flex" style="display: block;">
<div class="salesken-flex salesken-flex-column">
<div class="sken-cue-time">2:16 pm</div>
<div class="sken-cue-title">
<p>
<span style="font-family: Arial; font-size: 13.3333px;">NPA Guidelines</span><br>
</p>
</div>
<div class="sken-cue-text">
<p>
If the account has not been active for more than 90 days, it will be declared an NPA and that will lead to strident actions. Need to start paying the EMIs to avoid unnecessary legal hassles<br>
<br>
</p>
</div>
</div>
</div>
</div>如果您只想要textNodes(innerText?) 您可以使用createTreeWalker()。
var treeWalker = document.createTreeWalker(
document.getElementById('mydivbody'),
NodeFilter.SHOW_TEXT
);
var nodeList = [];
var currentNode = treeWalker.currentNode;
while(currentNode) {
//nodeList.push(currentNode.wholeText);
nodeList.push(currentNode.textContent);
currentNode = treeWalker.nextNode();
};
console.log(nodeList);<input type="search" id="mysearch" placeholder="Search here" />
<div class="sken-cues-body" id="mydivbody">
<div class="sken-cue-card" style="display: block;" >
<div class="salesken-flex salesken-flex-column">
<div class="sken-cue-title">Welcome to My Customer!</div>
<div class="sken-cue-text">
Want to help every sales agent like a <b>champion !</b>
</div>
<div class="">
<a type="button" href="https://salesken.ai/sign-in.html" class="sken-button-theme">START HERE</a>
</div>
</div>
</div>
<div class="sken-cue-card salesken-flex" style="display: block;">
<div class="salesken-flex salesken-flex-column">
<div class="sken-cue-time">2:16 pm</div>
<div class="sken-cue-title">Talking Points</div>
<div class="sken-cue-text" id="11">
<ul >
<li>Greet the customer</li>
<li>Ask if it is a good time to talk</li>
<li>Be polite & courteous on the call</li>
<li>Listen carefully</li>
<li>Thank the customer for their time</li>
</ul>
<p></p>
</div>
</div>
</div>
<div class="sken-cue-card salesken-flex" style="display: block;">
<div class="salesken-flex salesken-flex-column">
<div class="sken-cue-time">2:16 pm</div>
<div class="sken-cue-title"></div>
<div class="sken-cue-text">
<p>
Introduce yourself and why you are calling, ask if it is a good time to talk<br>
</p>
</div>
</div>
</div>
<div class="sken-cue-card salesken-flex" style="display: block;">
<div class="salesken-flex salesken-flex-column">
<div class="sken-cue-time">2:16 pm</div>
<div class="sken-cue-title">
<p>
<span style="font-family: Arial; font-size: 13.3333px;">NPA Guidelines</span><br>
</p>
</div>
<div class="sken-cue-text">
<p>
If the account has not been active for more than 90 days, it will be declared an NPA and that will lead to strident actions. Need to start paying the EMIs to avoid unnecessary legal hassles<br>
<br>
</p>
</div>
</div>
</div>
</div>