你可以尝试结合
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>
.
