Правильно построить логику в each

Question

Подскажите, как правильно построить следующую логику:

Существует множество .row строк с вложенными в них div. div'ов может быть 1, 2, 5 с относительно уникальными атрибутами и т.д. Необходимо скрывать целиком весь row, если не один из div'ов внутри него не совпадает по условию. Кроме того, внутри row, в котором нашлись совпадения, нужно скрыть те div'ы, которые не удовлетворили условию.

Когда я использую конструкцию ниже, то все срабатывает хорошо, но ровно до того момента, как в том самом .row не окажется более чем 1 div. Так получается, что в 1 div атрибут не совпадает, а в другом совпадает, но удаляется целиком строка. Как можно решить ?

$(".containerItems .row div[data-game]:not([data-search*='" + symbol + "'])").each(function(){

    $(this).parent().fadeOut("fast");                       
});

Если же убрать parent()

$(".containerItems .row div[data-game]:not([data-search*='" + symbol + "'])").each(function(){

    $(this).fadeOut("fast");                        
});

то остаются пробелы тех самых .row. Ведь display none применяется ко вложенному div, который соответствует условиям.

Примерный вид div

<div data-game="cs go" data-search="cs go go cs контра кс кс го го коэс" class="col-md-3 col-xs-4 game-main">
<div class="promo-game-item">
<div class="game-title"></div>
</div>
</div>

Answer 1

Цвета поменяй на fadeOut, это для наглядности

const sleep=(ms)=>new Promise((r)=>setTimeout(r, ms));

(async()=>{
    await sleep(2000);
    const symb = 'cs 1.6';
    $('.containerItems > .row').each((i, e)=>{
        const one = $(e).children(`div[data-search*="${symb}"]`);
        if(one.length > 0){
            one.css('background', 'green');
            $(e).children(`div:not([data-search*="${symb}"])`).css('background', 'red');
        }else{
            $(e).children().css('background','darkred'); // $(e).fadeOut();
        }
    });
})();

.game-main{
    background: grey;
    margin-bottom: 3px;
}

.containerItems{
    border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='containerItems'>
  <!-- ONE -->
  row 1
  <div class="row">
    <div data-game='cs go' data-search='cs go go cs' class='col-md-3 col-xs-4 game-main'>
      <div class='promo-game-item'>
        <div class='game-title'>
          Title1
        </div>
      </div>
    </div>
    <div data-game='asd' data-search='asd' class='col-md-3 col-xs-4 game-main'>
      <div class='promo-game-item'>
        <div class='game-title'>
          Title2
        </div>
      </div>
    </div>
    <div data-game='zzzz cs' data-search='go go' class='col-md-3 col-xs-4 game-main'>
      <div class='promo-game-item'>
        <div class='game-title'>
          Title3
        </div>
      </div>
    </div>
  </div>
  <!-- TWO -->
  row 2
  <div class="row">
    <div data-game='cs 1.6' data-search='cs' class='col-md-3 col-xs-4 game-main'>
      <div class='promo-game-item'>
        <div class='game-title'>
          Title4
        </div>
      </div>
    </div>
    <div data-game='csze' data-search='cs 1.6' class='col-md-3 col-xs-4 game-main'>
      <div class='promo-game-item'>
        <div class='game-title'>
          Title5
        </div>
      </div>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Правильно построить логику в each

Ответы (1 шт):