javascript рекурсивная итерация возвращает весь родительский div в рекурсивной итерации - PullRequest
Новая
       6

javascript рекурсивная итерация возвращает весь родительский div в рекурсивной итерации

0 голосов
/ 18 февраля 2020

Я хочу реализовать функцию поиска на моем элементе 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 &amp; 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&nbsp;paying the EMIs to avoid unnecessary legal hassles<br>
                        <br>
                    </p>
                </div>
            </div>
        </div> 
    </div>

Для функции поиска реализации необходимо выполнить рекурсивную итерацию внутри элемента div с идентификатором mydivbody. Ниже приведена javascript функция для рекурсивной итерации в div с идентификатором mydivbody: 

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. для меня узел дублируется. Подскажите пожалуйста как это исправить

1 Ответ

0 голосов
/ 19 февраля 2020

Рекурсивная итерация вашей функции 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 &amp; 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&nbsp;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 &amp; 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&nbsp;paying the EMIs to avoid unnecessary legal hassles<br>
                        <br>
                    </p>
                </div>
            </div>
        </div> 
    </div>
...