Перезагрузить nth-дочерние классы после фильтра javascript

Question

Я использую javascript, чтобы отфильтровать кучу div на странице.Я использую этот код для фильтрации, и он работает хорошо.Я также использую nth-child в css для создания адаптивной сетки, которая удаляет внешние границы, чтобы сделать внешний вид менее блочным.Однако nth-дочерний элемент не пересчитывается при фильтрации объектов, поэтому в середине сетки отсутствуют границы и дополнительные границы по краям, если не показаны все элементы div.

Кто-нибудь есть какие-либо предложения о том, как повторно применить / перезагрузить CSS после нажатия одной из кнопок фильтра?

filterSelection("all")
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("filterDiv");
  if (c == "all") c = "";
  // Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

// Show filtered elements
function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {
      element.className += " " + arr2[i];
    }
  }
}

// Hide elements that are not selected
function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1); 
    }
  }
  element.className = arr1.join(" ");
}

// Add active class to the current control button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

и CSS

.filterDiv {
    border-top: none;
    height:215px;
    border: 1px #ddd solid;

}


.filterDiv:nth-child(4n+0) {
    border-right:none; 
}

.filterDiv:first-child {
    border-left:none; 
}

Answer 1

Я прочитал код из w3schools , который вы указали.Я предполагаю, что ваша проблема в том, что :nth-child не исключает display: none детей.

Другими словами, :nth-child( 2 ) в приведенном ниже примере равно .second.независимо от его отображаемого значения:

<div class="container">

    <div class="first"></div>
    <div class="second"></div>
    <div class="third"></div>

</div>

, поэтому, если вы сделаете свой элемент .first скрытым, он не сделает ваш элемент .second равным :first-child;это все еще :nth-child( 2 ).

Надеюсь, это может кое-что прояснить для вас.