使用父選擇器過濾

Question

請幫幫我。 我需要在油漆目錄中添加一個過濾器。

我在頁面上有這樣的代碼：

<div class="container">
    <div class="row">
        <div class="col-12">
            <input id="myInputDiv" type="text">
            <script>
                (function ($) {
                    $('#myInputDiv').on('keyup', function () {
                        var value = $(this).val().toLowerCase();
                        $('#myDIV *').filter(function () {
                            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
                        });
                    });
                }(jQuery));
            </script>
        </div>
    </div>
    <div class="row" id="myDIV">
        <div class="col-4 col-sm-4 col-md-2 color-teaser">
            <div class="views-fields">
                <div class="views-field views-field-field-c-rgb-id">
                    <div class="color-teaser-display" style="background-color: #F6F3E6; color: #F6F3E6" role="img" alt="#F6F3E6"></div>
                </div>
                <div class="views-field views-field-title"> <span class="field-content">F300</span>
                </div>
            </div>
        </div>
        <div class="col-4 col-sm-4 col-md-2 color-teaser">
            <div class="views-fields">
                <div class="views-field views-field-field-c-rgb-id">
                    <div class="color-teaser-display" style="background-color: #F9EFD8; color: #F9EFD8" role="img" alt="#F9EFD8"></div>
                </div>
                <div class="views-field views-field-title"> <span class="field-content">G300</span>
                </div>
            </div>
        </div>
    </div>
</div>

作為腳本的結果，我得到了這個：

<div class="views-field views-field-title"> 
    <span class="field-content">F300</span>
</div>

但我需要這個：

<div class="col-4 col-sm-4 col-md-2 color-teaser c-id-24958 views-row">
    <div class="views-fields">
        <div class="views-field views-field-field-c-rgb-id">
            <div class="color-teaser-display" style="background-color: #F6F3E6; color: #F6F3E6" role="img" alt="#F6F3E6"></div>
        </div>
        <div class="views-field views-field-title"> <span class="field-content">F300</span>
        </div>
    </div>
</div>

如何更改腳本以獲得所需的結果？

Answer 1

而不是$('#myDIV *')使用$('#myDIV > div')所以你只過濾帶有 col-4 的潛水

 (function ($) { $('#myInputDiv').on('keyup', function () { var value = $(this).val().toLowerCase(); $('#myDIV > div').filter(function () { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1); }); }); }(jQuery));

 .color-teaser{ background: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="row"> <div class="col-12"> <input id="myInputDiv" type="text"> </div> </div> <div class="row" id="myDIV"> <div class="col-4 col-sm-4 col-md-2 color-teaser"> <div class="views-fields"> <div class="views-field views-field-field-c-rgb-id"> <div class="color-teaser-display" style="background-color: #F6F3E6; color: #F6F3E6" role="img" alt="#F6F3E6"></div> </div> <div class="views-field views-field-title"> <span class="field-content">F300</span> </div> </div> </div> <div class="col-4 col-sm-4 col-md-2 color-teaser"> <div class="views-fields"> <div class="views-field views-field-field-c-rgb-id"> <div class="color-teaser-display" style="background-color: #F9EFD8; color: #F9EFD8" role="img" alt="#F9EFD8"></div> </div> <div class="views-field views-field-title"> <span class="field-content">G300</span> </div> </div> </div> </div> </div>

Answer 2

您必須過濾myDIV的children元素：

 (function ($) { $('#myInputDiv').on('keyup', function () { var value = $(this).val().toLowerCase(); $('#myDIV').children().filter(function () { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1); }); }); }(jQuery));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="row"> <div class="col-12"> <input id="myInputDiv" type="text"> </div> </div> <div class="row" id="myDIV"> <div class="col-4 col-sm-4 col-md-2 color-teaser"> <div class="views-fields"> <div class="views-field views-field-field-c-rgb-id"> <div class="color-teaser-display" style="background-color: #F6F3E6; color: #F6F3E6" role="img" alt="#F6F3E6"></div> </div> <div class="views-field views-field-title"> <span class="field-content">F300</span> </div> </div> </div> <div class="col-4 col-sm-4 col-md-2 color-teaser"> <div class="views-fields"> <div class="views-field views-field-field-c-rgb-id"> <div class="color-teaser-display" style="background-color: #F9EFD8; color: #F9EFD8" role="img" alt="#F9EFD8"></div> </div> <div class="views-field views-field-title"> <span class="field-content">G300</span> </div> </div> </div> </div> </div>