[英]Filter with parents selector
help me please.请帮帮我。 I need to add a filter to the paint catalog.
我需要在油漆目录中添加一个过滤器。
I have a code like this on the page:我在页面上有这样的代码:
<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>
As a result of the script I get this:作为脚本的结果,我得到了这个:
<div class="views-field views-field-title">
<span class="field-content">F300</span>
</div>
But I need this:但我需要这个:
<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>
How can I change the script to get the desired result?如何更改脚本以获得所需的结果?
instead of $('#myDIV *')
use $('#myDIV > div')
so you are only filtering the dive with col-4 in it而不是
$('#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>
You have to filter on the children
elements of myDIV
:您必须过滤
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.