如何使用JavaScript filter过滤元素搜索？

Question

我试着让这个过滤器正常工作。

我将其设置为filter，并根据卡片的类名(landing-pages-list)仅显示我正在查找的内容。但是这个函数不起作用，怎么能起作用呢？

我尝试过实现，但我仍然不理解bcs --我是一个javascript编程新手

代码如下：

<section class="content-special-sites page-section">
            <div class="landing-pages-wrapcontent">
                <div class="list-special-sites-wrapper">
                    <div id="list-item" class="landing-pages-row">
                        <div class="landing-pages-column pria">
                            <div class="landing-pages-card">
                                <img src="assets/images/list-1.jpg" style="width: 100%;">
                                <div class="landing-pages-container">
                                    <div class="landing-pages-date">17 Agustus 2019</div>
                                    <div class="landing-pages-list">G-SHOCK GA 700</div>
                                </div>
                                <div class="landing-pages-button-wrapper">
                                    <a class="button-detail-list" href="#lihat-detail-list1" target="_blank">Lihat
                                        Detail</a>
                                </div>
                            </div>
                        </div>
                        <div class="landing-pages-column pria">
                            <div class="landing-pages-card">
                                <img src="assets/images/list-2.jpg" style="width: 100%;">
                                <div class="landing-pages-container">
                                    <div class="landing-pages-date">17 Agustus 2019</div>
                                    <div class="landing-pages-list">SPINNAKER VINTAGE HULL</div>
                                </div>
                                <div class="landing-pages-button-wrapper">
                                    <a class="button-detail-list" href="#lihat-detail-list2" target="_blank">Lihat
                                        Detail</a>
                                </div>
                            </div>
                        </div>
                        <div class="landing-pages-column pria">
                            <div class="landing-pages-card">
                                <img src="assets/images/list-3.jpg" style="width: 100%;">
                                <div class="landing-pages-container">
                                    <div class="landing-pages-date">17 Agustus 2019</div>
                                    <div class="landing-pages-list">SEIKO 5 SPORTS</div>
                                </div>
                                <div class="landing-pages-button-wrapper">
                                    <a class="button-detail-list" href="https://first.id/special-site/seiko-5/"
                                        target="_blank">Lihat Detail</a>
                                </div>
                            </div>
                        </div>
                        <div class="landing-pages-column wanita">
                            <div class="landing-pages-card">
                                <img src="assets/images/list-4.jpg" style="width: 100%;">
                                <div class="landing-pages-container">
                                    <div class="landing-pages-date">17 Agustus 2019</div>
                                    <div class="landing-pages-list">ALEXANDRE CHRISTIE</div>
                                </div>
                                <div class="landing-pages-button-wrapper">
                                    <a class="button-detail-list"
                                        href="https://first.id/special-site/alexandre-christie/" target="_blank">Lihat
                                        Detail</a>
                                </div>
                            </div>
                        </div>
                        <div class="landing-pages-column pria">
                            <div class="landing-pages-card">
                                <img src="assets/images/list-5.jpg" style="width: 100%;">
                                <div class="landing-pages-container">
                                    <div class="landing-pages-date">17 Agustus 2019</div>
                                    <div class="landing-pages-list">SPINNAKER VINTAGE CROFT</div>
                                </div>
                                <div class="landing-pages-button-wrapper">
                                    <a class="button-detail-list"
                                        href="https://first.id/special-site/spinnaker-vintage-croft/"
                                        target="_blank">Lihat Detail</a>
                                </div>
                            </div>
                        </div>
                        <div class="landing-pages-column wanita">
                            <div class="landing-pages-card">
                                <img src="assets/images/list-6.jpg" style="width: 100%;">
                                <div class="landing-pages-container">
                                    <div class="landing-pages-date">17 Agustus 2019</div>
                                    <div class="landing-pages-list">SPINNAKER PRO HELIUM</div>
                                </div>
                                <div class="landing-pages-button-wrapper">
                                    <a class="button-detail-list"
                                        href="https://first.id/special-site/spinnaker-pro-helium/" target="_blank">Lihat
                                        Detail</a>
                                </div>
                            </div>
                        </div>
                        <div class="landing-pages-column pria">
                            <div class="landing-pages-card">
                                <img src="assets/images/list-7.jpg" style="width: 100%;">
                                <div class="landing-pages-container">
                                    <div class="landing-pages-date">17 Agustus 2019</div>
                                    <div class="landing-pages-list">TOMMY HILFIGER</div>
                                </div>
                                <div class="landing-pages-button-wrapper">
                                    <a class="button-detail-list" href="#list-7" target="_blank">Lihat
                                        Detail</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="landing-pages-load-more">
                        <center><a class="landing-pages-load-more-ajax" id="load-more">Load More</a>
                        </center>
                    </div>
                </div>
            </div>
        </section>

这是一个javascript

function myFunction() {
        var input, filter, card, list, a, i;
        input = document.getElementById("searchbar");
        filter = input.value.toUpperCase();
        card = document.getElementById("list-item");
        list = card.getElementsByTagName("div .landing-pages-list");
        for (i = 0; i < list.length; i++) {
            a = list[i].getElementsByTagName("div .landing-pages-list")[0];
            if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
                list[i].parentElement.parentElement.style.display = "";
            } else {
                list[i].parentElement.parentElement.style.display = "none";
            }
        }
    }

当我打字的时候，不是工作

Answer 1

getElementsByTagName在CSS类后面有一个标记名，它将找不到任何东西。

如果你能够使用这个方法，它将是getElementsByTagName(“div”)；

但是，由于上面的代码将获得页面上的所有div，因此您应该使用getElementsByClassName(“landing-pages-list”)。