如何打开最后一个包含单词的嵌套折叠项目？

问题描述

我创建了一些折叠元素，其中包含要搜索的特定单词。

我在 3 个折叠的项目中找到了这个词，我在每次按下“查找”按钮时都成功打开它们，但我无法打开包含它的最后一个项目，在示例的第 4 个嵌套可折叠项目中。

document.addEventListener("DOMContentLoaded",function() {
    let btn = document.querySelector('#findWord');    
    btn.addEventListener('click',function(){
        // console.log('you clicked me');
        let term = document.querySelector('#searchedWord').value;

        let occurrences = [];
        $('.timeline-type__content ul > li > a > .reports-list-item__title--compendium').each(function (i) {
            // create a regex from our term 
            var r = new RegExp('(' + term + ')',"ig");

            if ($(this).html().match(r)) {
                // console.log('this html match r is:' + ' ' + r);
                var matches = $(this).html().match(r);
                // console.log(matches);
                // console.log('Var matches =' + ' ' + matches);
                // loop through them
                $.each(matches,function () {
                    occurrences.push(i);
                    // console.log('Occurences contains:' + ' ' + occurences);
                    // console.log(occurrences);
                });
                // wrap each found search term with our `found` span to highlight it 
                $(this).html($(this).html().replace(r,'<span class="found">$1</span>'));
            }
        });

        let lengthOccurrences = occurrences.length;
        //console.log('Number of occurrences is:' + ' ' + lengthOccurrences);

        let currViewMatch = Number(document.querySelector('#current').textContent);
        //console.log('Number of current viewed match is:' + ' ' + currViewMatch);
        
        // if we are currently viewing a match,increment so we move to the next one
        currViewMatch = currViewMatch > 0 ? currViewMatch + 1 : 0;
        // if the incremented number is higher than the number of matches,reset it to 0
        currViewMatch = currViewMatch > lengthOccurrences ? 1 : currViewMatch;
        // if this is the first click and we found matches,set current to the first match
        currViewMatch = currViewMatch == 0 && lengthOccurrences > 0 ? 1 : currViewMatch;

        let insertNbrocc = lengthOccurrences > 0 ? ' of ' + lengthOccurrences : ' matches found in document';
         // set number of matches found
        let count = document.querySelector('#count');
        count.textContent = insertNbrocc;
        // console.log(count);

        // set  number of currently viewed match
        let nbrViewMatch = document.querySelector('#current');
        nbrViewMatch.textContent = currViewMatch;
        // console.log(insertTxtViewMatch);

        if(currViewMatch != 0){            
            // open the section holding the currently viewed match using the indexes we stored earlier
            $('.timeline-compendium__content').eq(occurrences[currViewMatch - 1]).collapse('show');
            $('.timeline-type .timeline-type__content').eq(occurrences[currViewMatch - 1]).collapse('show');
        }        
    });
});

.found {
    background-color: yellow;
}

#labels {
    margin-left: 15px;
    font-size: 16px;
}
.timeline-compendium {
    margin-left: 2rem;
}

.timeline-type__header {
    width: 400px;
    height: 50px;
    background-color: rgb(46,177,100);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    border: 1px solid white;
}
.timeline-type__header:hover {
    color: white;
    background-color: rgb(35,119,70);
}

#tab-content {
    border: 1px solid red;
}
input[type=text] {
    width: 80%;
    padding: 12px 20px;
    margin: 8px 0;
    Box-sizing: border-Box;
}

input#findWord {
    background-color: rgb(248,211,3);
    border: none;
    color: black;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container">
        <div class="row">
            <div class="col-sm-12">
                <input type="text" id="searchedWord" placeholder="search.." value="cool" />
                <input type="button" id="findWord" value="Find" />
            </div>
            <div class="col-sm-6">
                <div id="labels">
                    <span id="current"></span>
                    <span id="count"></span>
                </div>
            </div>
        </div>
        <div class="row">
           <div class="col">
            <section class="timeline-compendium">
                <a class="btn timeline-compendium__header" data-toggle="collapse" href="#introduction" role="button"
                    aria-expanded="true" aria-controls="introduction">
                    <div class="row align-items-center">
                        <div class="col-auto">1<sup>st</sup> collapsible item</div>
                        <div class="col"><span></span></div>
                        <div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand"
                                data-delay="400" aria-hidden="true" data-original-title="Collapse/expand"></em><span
                                class="sr-only">Collapse/expand
                                this item</span></div>
                    </div>
                </a>
                <div class="timeline-compendium__content collapse" id="introduction">
                    <div class="timeline-type">
                        <a data-toggle="collapse" href="#foreword" role="button" aria-expanded="false" aria-controls="foreword">
                            <div class="row no-gutters align-items-center">
                                <div class="col">
                                    <div class="timeline-type__header timeline-type__header--title">
                                        <div class="row align-items-center">
                                            <div class="col-auto timeline-type__chapter">1</div>
                                            <div class="col timeline-type__title">First nested collapsible</div>
                                            <div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip"
                                                    title="Collapse/expand" data-delay="400" aria-hidden="true"></em><span
                                                    class="sr-only">Collapse/expand this
                                                    item</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                        <div class="timeline-type__content collapse" id="foreword">
                            <ul class="reports-list">
                                <li>
                                    <a href="#" target="_blank" class="reports-list-item reports-list-item--compendium">
                                        
                                        <div class="col-auto reports-list-item__title reports-list-item__title--compendium">
                                            First cool
            
                                        </div>
                                        <div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link"
                                                data-delay="400" aria-hidden="true"></em></div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </section>
            <!-- section 2 -->
            <section class="timeline-compendium">
                <a class="btn timeline-compendium__header collapsed" data-toggle="collapse" href="#titleA" role="button"
                    aria-expanded="false" aria-controls="titleA">
                    <div class="row align-items-center">
                        <div class="col-auto">2<sup>nd</sup></div>
                        <div class="col"><span>collapsible item</span></div>
                        <div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand"
                                data-delay="400" aria-hidden="true" data-original-title="Collapse/expand"></em><span
                                class="sr-only">Collapse/expand
                                this item</span></div>
                    </div>
                </a>
                <div class="timeline-compendium__content collapse" id="titleA">
                    <div class="timeline-type"><a class="accordion" data-toggle="collapse" href="#summary" role="button"
                            aria-expanded="false" aria-controls="summary" class="collapsed">
                            <div class="row no-gutters align-items-center">
                                <div class="col">
                                    <div class="timeline-type__header timeline-type__header--title">
                                        <div class="row align-items-center">
                                            <div class="col-auto timeline-type__chapter">2</div>
                                            <div class="col timeline-type__title">Second nested collapsible</div>
                                            <div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip"
                                                    title="Collapse/expand" data-delay="400" aria-hidden="true"></em><span
                                                    class="sr-only">Collapse/expand
                                                    this item</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                        <div class="timeline-type__content collapse" id="summary">
                            <ul class="reports-list">
                                <li><a href="#"
                                        target="_blank" class="reports-list-item reports-list-item--compendium">
                                        
                                        <div class="col-auto reports-list-item__title reports-list-item__title--compendium">
                                            Second cool
            
                                        </div>
                                        <div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link"
                                                data-delay="400" aria-hidden="true"></em></div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </section>
            <!-- section 3 -->
            <section class="timeline-compendium"><a class="btn timeline-compendium__header collapsed" data-toggle="collapse"
                    href="#titleB" role="button" aria-expanded="false" aria-controls="titleB">
                    <div class="row align-items-center">
                        <div class="col-auto">3<sup>rd</sup></div>
                        <div class="col"><span>collapsible item</span>
                        </div>
                        <div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip" title="Collapse/expand"
                                data-delay="400" aria-hidden="true"></em><span class="sr-only">Collapse/expand
                                this item</span></div>
                    </div>
                </a>
            
                <div class="timeline-compendium__content collapse" id="titleB">
                    <div class="timeline-type"><a data-toggle="collapse" href="#chapterB0" role="button" aria-expanded="false"
                            aria-controls="chapterB0" class="collapsed">
                            <div class="row no-gutters align-items-center">
                                <div class="col">
                                    <div class="timeline-type__header timeline-type__header--title">
                                        <div class="row align-items-center">
                                            <div class="col-auto timeline-type__chapter">3</div>
                                            <div class="col timeline-type__title">Third nested collapsible</div>
                                            <div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip"
                                                    title="Collapse/expand" data-delay="400" aria-hidden="true"></em><span
                                                    class="sr-only">Collapse/expand
                                                    this item</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                        <div class="timeline-type__content collapse" id="chapterB0">
                            <ul class="reports-list">
                                <li><a class="reports-list-item reports-list-item--compendium">
                                        <div class="col-auto reports-list-item__title reports-list-item__title--nolink">
                                            No link
            
                                        </div>
                                    </a>
                                </li>
                                <li><a href="#"
                                        target="_blank" class="reports-list-item reports-list-item--compendium">
                                        
                                        <div class="col-auto reports-list-item__title reports-list-item__title--compendium">
                                            Some content with link and cool
            
                                        </div>
                                        <div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link"
                                                data-delay="400" aria-hidden="true"></em></div>
                                    </a>
                                </li>
                                <li><a href="#"
                                        target="_blank" class="reports-list-item reports-list-item--compendium">
                                        <div class="col-auto reports-list-item__title reports-list-item__title--compendium">
                                            Some content with link
            
                                        </div>
                                        <div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link"
                                                data-delay="400" aria-hidden="true"></em></div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="timeline-type"><a data-toggle="collapse" href="#chapterB2" role="button" aria-expanded="false"
                            aria-controls="chapterB2" class="collapsed">
                            <div class="row no-gutters align-items-center">
                                <div class="col">
                                    <div class="timeline-type__header timeline-type__header--title">
                                        <div class="row align-items-center">
                                            <div class="col-auto timeline-type__chapter">4</div>
                                            <div class="col timeline-type__title">Fourth nested collapsible
                                            </div>
                                            <div class="col-auto"><em class="icon-arrow-down" data-toggle="tooltip"
                                                    title="Collapse/expand" data-delay="400" aria-hidden="true"></em><span
                                                    class="sr-only">Collapse/expand
                                                    this item</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                        <div class="timeline-type__content collapse" id="chapterB2">
                            <ul class="reports-list">
                                <li><a class="reports-list-item reports-list-item--compendium">
                                        <div class="col reports-list-item__title reports-list-item__title--nolink">
                                            No link
                                        </div>
                                    </a>
                                </li>
                                <li><a href="#" class="reports-list-item reports-list-item--compendium">
                                        <div class="col-auto reports-list-item__title reports-list-item__title--compendium">
                                            Some cool content with link
            
                                        </div>
                                        <div class="reports-list-item__url"><em class="icon-url" data-toggle="tooltip" title="Link"
                                                data-delay="400" aria-hidden="true"></em></div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </section>
           </div>
        </div>
    </div>

我创建了一些折叠元素，其中包含要搜索的特定单词。

我在 3 个折叠的项目中找到了这个词，我在每次按下“查找”按钮时都成功打开它们，但在示例的第 4 个嵌套可折叠项目中，我无法打开包含它的最后一个项目。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）