亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

使用父選擇器過濾

使用父選擇器過濾

慕桂英4014372 2023-05-11 13:22:54
請幫幫我。我需要在繪畫目錄中添加一個過濾器。我在頁面上有這樣的代碼:<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>如何更改腳本以獲得所需的結果?
查看完整描述

2 回答

?
三國紛爭

TA貢獻1804條經驗 獲得超7個贊

您必須過濾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>


查看完整回答
反對 回復 2023-05-11
?
拉莫斯之舞

TA貢獻1820條經驗 獲得超10個贊

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


查看完整回答
反對 回復 2023-05-11
  • 2 回答
  • 0 關注
  • 225 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號