jquery - 如何将第 n 个子样式应用于过滤的 div 集?
问题描述
期望的行为
使用以下方法将样式应用于容器中每三个可见子 div(即 1、3、5、7 等):
.card:nth-child(2n+1) {
margin-right: 20px !important;
background: pink;
}
实际行为
nth-child
样式应用于所有子 div,无论可见性如何(这是已知行为)。
设想
带有在输入键上过滤的子 div 的容器。
过滤后,nth-child
样式将应用于所有子 div,而不仅仅是可见 div。
下面链接的答案提供了一个类似问题的解决方案detach()
,但我无法弄清楚如何在每个 keyup 过滤器之后动态重新插入分离的元素(并且不确定这是否是最好的方法)。
https://stackoverflow.com/a/32380418
jsFiddle: 链接
$(document).on("keyup", ".my_input", function() {
var input_val = $(this).val();
var input_length = input_val.length;
// minimum 2 chars for search
if (input_length > 2) {
filter_cards(input_val);
} else if (input_length <= 2) {
$(".card").show();
// remove matched text styling
// see: https://stackoverflow.com/a/4232971
$('span.matched_text').contents().unwrap();
}
});
// filter function
function filter_cards(input_val) {
// iterate over each card
$(".card").each(function() {
var match_counter = 0;
// instance of card
var $card = $(this);
var text = $card.text();
var exists_in_string =
text.toLowerCase().indexOf(input_val.toLowerCase()) !== -1;
if (exists_in_string === false) {
$card.html(text);
} else if (exists_in_string === true) {
match_counter += 1;
var reg = new RegExp(input_val, 'i');
$card.html(text.replace(reg, '<span class="matched_text">$&</span>'));
}
if (match_counter > 0) {
$card.show();
} else {
$card.hide();
}
});
}
* {
box-sizing: border-box;
}
.my_input {
width: 100%;
font-size: 48px;
margin-bottom: 20px;
}
.my_cards {
display: flex;
flex-wrap: wrap;
}
.card {
width: calc(50% - 10px);
font-size: 38px;
border: 1px solid #000;
margin-bottom: 30px;
}
/* add margin on child divs 1,3,5,7 etc */
.card:nth-child(2n+1) {
margin-right: 20px !important;
background: pink;
}
.matched_text {
background: green;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="my_input" placeholder="search for hello, min 2 chars...">
<div class="my_cards">
<div class="card" data-initial_index="0">
01 - apples and hello
</div>
<div class="card" data-initial_index="1">
02 - oranges and hello
</div>
<div class="card" data-initial_index="2">
03 - bananas
</div>
<div class="card" data-initial_index="3">
04 - passionfruits and hello
</div>
<div class="card" data-initial_index="4">
05 - mangos and hello
</div>
<div class="card" data-initial_index="5">
06 - limes and hello
</div>
</div>
解决方案
您可以尝试结合使用visible
伪odd/even
选择器来更改您的 CSS:
$('.card:visible:even').css({ 'background': 'pink'});
$('.card:visible:odd').css({ 'background': 'white'});
$(document).on("keyup", ".my_input", function() {
var input_val = $(this).val();
var input_length = input_val.length;
// minimum 2 chars for search
if (input_length > 2) {
filter_cards(input_val);
} else if (input_length <= 2) {
$(".card").show();
// remove matched text styling
// see: https://stackoverflow.com/a/4232971
$('span.matched_text').contents().unwrap();
}
$('.card:visible:even').css({ 'background': 'pink','marginRight':'20px'});
$('.card:visible:odd').css({ 'background': 'white','marginRight':0});
});
// filter function
function filter_cards(input_val) {
// iterate over each card
$(".card").each(function() {
var match_counter = 0;
// instance of card
var $card = $(this);
var text = $card.text();
var exists_in_string =
text.toLowerCase().indexOf(input_val.toLowerCase()) !== -1;
if (exists_in_string === false) {
$card.html(text);
} else if (exists_in_string === true) {
match_counter += 1;
var reg = new RegExp(input_val, 'i');
$card.html(text.replace(reg, '<span class="matched_text">$&</span>'));
}
if (match_counter > 0) {
$card.show();
} else {
$card.hide();
}
});
}
* {
box-sizing: border-box;
}
.my_input {
width: 100%;
font-size: 48px;
margin-bottom: 20px;
}
.my_cards {
display: flex;
flex-wrap: wrap;
}
.card {
width: calc(50% - 10px);
font-size: 38px;
border: 1px solid #000;
margin-bottom: 30px;
overflow:hidden;
}
/* add margin on child divs 1,3,5,7 etc */
.card:nth-child(2n+1) {
margin-right: 20px;
background: pink;
}
.matched_text {
background: green;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="my_input" placeholder="search for hello, min 2 chars...">
<div class="my_cards">
<div class="card" data-initial_index="0">
01 - apples and hello
</div>
<div class="card" data-initial_index="1">
02 - oranges and hello
</div>
<div class="card" data-initial_index="2">
03 - bananas
</div>
<div class="card" data-initial_index="3">
04 - passionfruits and hello
</div>
<div class="card" data-initial_index="4">
05 - mangos and hello
</div>
<div class="card" data-initial_index="5">
06 - limes and hello
</div>
</div>
推荐阅读
- django - 如何创建从一个 Django 应用程序到另一个应用程序的 href 链接
- ios - 根据列表 iOS swift 更新通知徽章编号
- docker - 在哪里可以找到使用 Docker desktop for windows 在 Microsoft Windows 10 企业版操作系统上的 docker 容器日志
- browser-automation - 通过在线视频会议提供自动音频
- java - 如何为 gradle 项目包括声纳排除
- django - 在 DRF 中发送激活电子邮件时处理错误
- javascript - 每当对 Firebase 存储进行新条目时发出通知
- javascript - 基于其他字段值的 Mongoose 动态模式类型
- nic - 关于 XDP_redirect 方法的问题
- reactjs - 将道具传递给组件时,如何添加第 n 个子属性?