jquery - 如何将 nth-child 样式应用于过滤后的 div 集？

Question

期望的行为

将样式应用于容器中的每三个可见子 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() 的类似问题提供了解决方案，但我无法弄清楚如何在每个 keyup 过滤器之后动态地重新插入分离的元素(并且不是确定这是否是最好的方法)。

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>

Answer 1

您可以尝试结合使用 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>