Как добавить класс к родителю, если все дети получили класс? - PullRequest
Новая
       0

Как добавить класс к родителю, если все дети получили класс?

0 голосов
/ 25 мая 2020

Я хочу добавить класс к ближайшему родителю, когда все дочерние элементы получили класс hide. В этом случае, когда все дочерние элементы класса matching-attribute получили также класс hide, он должен добавить класс hide к родительскому compare-group-row.

Я пробовал следующее, но это не работает, потому что в в этом случае он добавляет класс hide ко всем элементам compare-group-row, даже если не все дочерние элементы получили класс hide.

И он должен только добавить его к основному родительскому элементу, потому что у нас много этих элементов на странице. 

$(".compare-group-row .attribute-rows .matching-attribute").each(function() {
  if ($(this).hasClass('hide'))
    $(this).closest('.compare-group-row').addClass('hide');
  else
    $(this).closest('.compare-group-row').removeClass('hide');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="compare-group-row active">
  <div class="flex-table group-row row" role="rowgroup">
    <div class="flex-row frist" role="cell">
      <span class="attribute label">ITEM 1</span>
    </div>
    <div class="flex-row" role="cell"></div>
    <div class="flex-row" role="cell"></div>
  </div>
  <div class="attribute-rows">
    <div class="flex-table attribute-row row  matching-attribute hide" role="rowgroup">
      <div class="flex-row first" role="cell">ITEM 1</div>
      <div class="flex-row">VALUE 1</div>
      <div class="flex-row">VALUE 1</div>
    </div>
    <div class="flex-table attribute-row row  matching-attribute hide" role="rowgroup">
      <div class="flex-row first" role="cell">ITEM 1</div>
      <div class="flex-row">VALUE 1</div>
      <div class="flex-row">VALUE 1</div>
    </div>
    <div class="flex-table attribute-row row  matching-attribute hide" role="rowgroup">
      <div class="flex-row first" role="cell">ITEM 1</div>
      <div class="flex-row">VALUE 1</div>
      <div class="flex-row">VALUE 1</div>
    </div>
    <div class="flex-table attribute-row row  matching-attribute hide" role="rowgroup">
      <div class="flex-row first" role="cell">ITEM 1</div>
      <div class="flex-row">VALUE 1</div>
      <div class="flex-row">VALUE 1</div>
    </div>
  </div>
</div>

<div class="compare-group-row active">
  <div class="flex-table group-row row" role="rowgroup">
    <div class="flex-row frist" role="cell">
      <span class="attribute label">ITEM 2</span>
    </div>
    <div class="flex-row" role="cell"></div>
    <div class="flex-row" role="cell"></div>
  </div>
  <div class="attribute-rows">
    <div class="flex-table attribute-row row  matching-attribute hide" role="rowgroup">
      <div class="flex-row first" role="cell">ITEM 1</div>
      <div class="flex-row">VALUE 1</div>
      <div class="flex-row">VALUE 1</div>
    </div>
    <div class="flex-table attribute-row row " role="rowgroup">
      <div class="flex-row first" role="cell">ITEM 1</div>
      <div class="flex-row">VALUE 1</div>
      <div class="flex-row">VALUE 2</div>
    </div>
    <div class="flex-table attribute-row row " role="rowgroup">
      <div class="flex-row first" role="cell">ITEM 1</div>
      <div class="flex-row">VALUE 1</div>
      <div class="flex-row">VALUE 2</div>
    </div>
    <div class="flex-table attribute-row row  matching-attribute hide" role="rowgroup">
      <div class="flex-row first" role="cell">ITEM 1</div>
      <div class="flex-row">VALUE 1</div>
      <div class="flex-row">VALUE 1</div>
    </div>
  </div>
</div>

Ответы [ 2 ]

1 голос
/ 25 мая 2020

Вы можете сделать это легко, просто проверив, одинакова ли длина всех дочерних элементов с классом .hide или нет. Если да, то добавьте класс к родительскому, иначе удалите его. 

$(".compare-group-row").each(function() {
  if($('.attribute-rows .matching-attribute.hide', this).length === $('.attribute-rows .matching-attribute', this).length)
    $(this).addClass('hide');
  else
    $(this).removeClass('hide');
});

Демо: 

$(".compare-group-row").each(function() {
  if($('.attribute-rows .matching-attribute.hide', this).length === $('.attribute-rows .matching-attribute', this).length)
    $(this).addClass('hide');
  else
    $(this).removeClass('hide');
});
.compare-group-row {
  padding: 5px; border: 1px solid red;
  margin: 5px 8px;
}

.compare-group-row.hide {
  background-color:#CCC;  
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="compare-group-row active">
  <div class="flex-table group-row row" role="rowgroup">
    <div class="flex-row frist" role="cell">
      <span class="attribute label">ITEM 1</span>
    </div>
    <div class="flex-row" role="cell"></div>
    <div class="flex-row" role="cell"></div>
  </div>
  <div class="attribute-rows">
    <div class="flex-table attribute-row row  matching-attribute hide" role="rowgroup">
      <div class="flex-row first" role="cell">ITEM 1</div>
      <div class="flex-row">VALUE 1</div>
      <div class="flex-row">VALUE 1</div>
    </div>
    <div class="flex-table attribute-row row  matching-attribute hide" role="rowgroup">
      <div class="flex-row first" role="cell">ITEM 1</div>
      <div class="flex-row">VALUE 1</div>
      <div class="flex-row">VALUE 1</div>
    </div>
    <div class="flex-table attribute-row row  matching-attribute hide" role="rowgroup">
      <div class="flex-row first" role="cell">ITEM 1</div>
      <div class="flex-row">VALUE 1</div>
      <div class="flex-row">VALUE 1</div>
    </div>
    <div class="flex-table attribute-row row  matching-attribute hide" role="rowgroup">
      <div class="flex-row first" role="cell">ITEM 1</div>
      <div class="flex-row">VALUE 1</div>
      <div class="flex-row">VALUE 1</div>
    </div>
  </div>
</div>

<div class="compare-group-row active">
  <div class="flex-table group-row row" role="rowgroup">
    <div class="flex-row frist" role="cell">
      <span class="attribute label">ITEM 2</span>
    </div>
    <div class="flex-row" role="cell"></div>
    <div class="flex-row" role="cell"></div>
  </div>
  <div class="attribute-rows">
    <div class="flex-table attribute-row row  matching-attribute hide" role="rowgroup">
      <div class="flex-row first" role="cell">ITEM 1</div>
      <div class="flex-row">VALUE 1</div>
      <div class="flex-row">VALUE 1</div>
    </div>
    <div class="flex-table attribute-row row matching-attribute" role="rowgroup">
      <div class="flex-row first" role="cell">ITEM 1</div>
      <div class="flex-row">VALUE 1</div>
      <div class="flex-row">VALUE 2</div>
    </div>
    <div class="flex-table attribute-row row matching-attribute" role="rowgroup">
      <div class="flex-row first" role="cell">ITEM 1</div>
      <div class="flex-row">VALUE 1</div>
      <div class="flex-row">VALUE 2</div>
    </div>
    <div class="flex-table attribute-row row  matching-attribute hide" role="rowgroup">
      <div class="flex-row first" role="cell">ITEM 1</div>
      <div class="flex-row">VALUE 1</div>
      <div class="flex-row">VALUE 1</div>
    </div>
  </div>
</div>

Или вы также можете сделать это в нескольких строках, используя метод .toggleClass(), например: 

$(".compare-group-row").each(function() {
  $(this).toggleClass('hide', $('.attribute-rows .matching-attribute.hide', this).length === $('.attribute-rows .matching-attribute', this).length);
});

Демо: 

$(".compare-group-row").each(function() {
  $(this).toggleClass('hide', $('.attribute-rows .matching-attribute.hide', this).length === $('.attribute-rows .matching-attribute', this).length);
});
.compare-group-row {
  padding: 5px; border: 1px solid red;
  margin: 5px 8px;
}

.compare-group-row.hide {
  background-color:#CCC;  
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="compare-group-row active">
  <div class="flex-table group-row row" role="rowgroup">
    <div class="flex-row frist" role="cell">
      <span class="attribute label">ITEM 1</span>
    </div>
    <div class="flex-row" role="cell"></div>
    <div class="flex-row" role="cell"></div>
  </div>
  <div class="attribute-rows">
    <div class="flex-table attribute-row row  matching-attribute hide" role="rowgroup">
      <div class="flex-row first" role="cell">ITEM 1</div>
      <div class="flex-row">VALUE 1</div>
      <div class="flex-row">VALUE 1</div>
    </div>
    <div class="flex-table attribute-row row  matching-attribute hide" role="rowgroup">
      <div class="flex-row first" role="cell">ITEM 1</div>
      <div class="flex-row">VALUE 1</div>
      <div class="flex-row">VALUE 1</div>
    </div>
    <div class="flex-table attribute-row row  matching-attribute hide" role="rowgroup">
      <div class="flex-row first" role="cell">ITEM 1</div>
      <div class="flex-row">VALUE 1</div>
      <div class="flex-row">VALUE 1</div>
    </div>
    <div class="flex-table attribute-row row  matching-attribute hide" role="rowgroup">
      <div class="flex-row first" role="cell">ITEM 1</div>
      <div class="flex-row">VALUE 1</div>
      <div class="flex-row">VALUE 1</div>
    </div>
  </div>
</div>

<div class="compare-group-row active">
  <div class="flex-table group-row row" role="rowgroup">
    <div class="flex-row frist" role="cell">
      <span class="attribute label">ITEM 2</span>
    </div>
    <div class="flex-row" role="cell"></div>
    <div class="flex-row" role="cell"></div>
  </div>
  <div class="attribute-rows">
    <div class="flex-table attribute-row row  matching-attribute hide" role="rowgroup">
      <div class="flex-row first" role="cell">ITEM 1</div>
      <div class="flex-row">VALUE 1</div>
      <div class="flex-row">VALUE 1</div>
    </div>
    <div class="flex-table attribute-row row matching-attribute" role="rowgroup">
      <div class="flex-row first" role="cell">ITEM 1</div>
      <div class="flex-row">VALUE 1</div>
      <div class="flex-row">VALUE 2</div>
    </div>
    <div class="flex-table attribute-row row matching-attribute" role="rowgroup">
      <div class="flex-row first" role="cell">ITEM 1</div>
      <div class="flex-row">VALUE 1</div>
      <div class="flex-row">VALUE 2</div>
    </div>
    <div class="flex-table attribute-row row  matching-attribute hide" role="rowgroup">
      <div class="flex-row first" role="cell">ITEM 1</div>
      <div class="flex-row">VALUE 1</div>
      <div class="flex-row">VALUE 1</div>
    </div>
  </div>
</div>
0 голосов
/ 25 мая 2020

Проверьте длину всех дочерних элементов и сравните ее со всеми соответствующими классами скрытия. Если длина такая же, добавьте класс скрытия. 

$(".parent").each(function() {
  if ($(this).children().length === $(this).find('.hide').length) {
    $(this).addClass('hideAll')
  }
});
.hideAll {
 display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
  <div class="hide">This should not be visible</div>
  <div class="hide">This should not be visible</div>  
  <div class="hide">This should not be visible</div>
</div>
<div class="parent">
  <div class="hide">This should be visible</div>
  <div>This should be visible</div>  
  <div class="hide">This should be visible</div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...