Как применить стиль nth-child к отфильтрованному набору элементов div?

Question

Желаемое поведение

Примените стилизацию для каждого третьего видимого дочернего элемента 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>

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>