使用父选择器过滤

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 ($) {

  $('#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>

Answer 2

而不是$('#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>