使用父选择器过滤

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>

如何更改脚本以获得所需的结果？

Answer 1

您必须过滤children以下元素myDIV：(function ($) {&nbsp; $('#myInputDiv').on('keyup', function () {&nbsp; &nbsp; &nbsp; var value = $(this).val().toLowerCase();&nbsp; &nbsp; &nbsp; $('#myDIV').children().filter(function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);&nbsp; &nbsp; &nbsp; });&nbsp; });}(jQuery));<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="container">&nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-12">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input id="myInputDiv" type="text">&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="row" id="myDIV">&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-4 col-sm-4 col-md-2 color-teaser">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="views-fields">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="views-field views-field-field-c-rgb-id">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="color-teaser-display" style="background-color: #F6F3E6; color: #F6F3E6" role="img" alt="#F6F3E6"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="views-field views-field-title"> <span class="field-content">F300</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-4 col-sm-4 col-md-2 color-teaser">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="views-fields">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="views-field views-field-field-c-rgb-id">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="color-teaser-display" style="background-color: #F9EFD8; color: #F9EFD8" role="img" alt="#F9EFD8"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="views-field views-field-title"> <span class="field-content">G300</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></div>

Answer 2

而不是$('#myDIV *')使用，$('#myDIV > div')所以您只过滤其中包含 col-4 的潜水(function ($) {&nbsp; &nbsp; $('#myInputDiv').on('keyup', function () {&nbsp; &nbsp; &nbsp; &nbsp; var value = $(this).val().toLowerCase();&nbsp; &nbsp; &nbsp; &nbsp; $('#myDIV > div').filter(function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });}(jQuery));.color-teaser{&nbsp; background: red;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="container">&nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-12">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input id="myInputDiv" type="text">&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="row" id="myDIV">&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-4 col-sm-4 col-md-2 color-teaser">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="views-fields">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="views-field views-field-field-c-rgb-id">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="color-teaser-display" style="background-color: #F6F3E6; color: #F6F3E6" role="img" alt="#F6F3E6"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="views-field views-field-title"> <span class="field-content">F300</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-4 col-sm-4 col-md-2 color-teaser">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="views-fields">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="views-field views-field-field-c-rgb-id">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="color-teaser-display" style="background-color: #F9EFD8; color: #F9EFD8" role="img" alt="#F9EFD8"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="views-field views-field-title"> <span class="field-content">G300</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></div>