期望的行为
使用以下方法对容器中的每三个可见子div(即1,3、5、7等)应用样式
.card:nth-child(2n+1) {
margin-right: 20px !important;
background: pink;
}
实际行为
nth-child
样式适用于所有子div,无论可见性如何(这是已知的行为)。
场景
一个带有子div的容器,该子div会在输入keyup上进行过滤。
过滤后,nth-child
样式将应用于所有子div,而不仅仅是可见的div。
下面链接的答案为使用detach()
的类似问题提供了解决方案,但是我无法弄清楚如何在每个键盘过滤器之后动态地重新插入分离的元素(并且不确定是否是最佳方法)。
https://stackoverflow.com/a/32380418
jsFiddle:link
$(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>
答案 0 :(得分:3)
您可以尝试使用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>