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

Question

我已尝试使此过滤器正常工作。

我将其设置为过滤并仅根据卡片的类名（登陆页面列表）显示我正在寻找的内容。但是这个功能不行，怎么办？

我尝试实现，但我仍然不明白 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”)。