0

Как скрывать родительский блок .row, если внутри нет совпадения по поиску? Сейчас просто скрывается ссылка, а необходимо сделать так, чтобы сначала скрывался .row, а затем только #list a

$(document).ready(function() {

  var jobCount = $('#list .in').length;
  $('.list-count').text(jobCount + ' items');
    
  
  $("#search-text").keyup(function () {
     //$(this).addClass('hidden');
  
    var searchTerm = $("#search-text").val();
    var listItem = $('#list').children('li');
  
    
    var searchSplit = searchTerm.replace(/ /g, "'):containsi('")
    
      //extends :contains to be case insensitive
  $.extend($.expr[':'], {
  'containsi': function(elem, i, match, array)
  {
    return (elem.textContent || elem.innerText || '').toLowerCase()
    .indexOf((match[3] || "").toLowerCase()) >= 0;
  }
});
    
    
    $("#list a").not(":containsi('" + searchSplit + "')").each(function(e)   {
      $(this).addClass('hiding out').removeClass('in');
      setTimeout(function() {
          $('.out').addClass('hidden');
        }, 300);
    });
    
    $("#list a:containsi('" + searchSplit + "')").each(function(e) {
      $(this).removeClass('hidden out').addClass('in');
      setTimeout(function() {
          $('.in').removeClass('hiding');
        }, 1);
    });
    
  
      var jobCount = $('#list .in').length;
    $('.list-count').text(jobCount + ' items');
    
    //shows empty state text when no jobs found
    if(jobCount == '0') {
      $('#list').addClass('empty');
    }
    else {
      $('#list').removeClass('empty');
    }
    
  });                    
});
/* this declares a better box model */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }




.list-wrap label {
  float:left;
  color:#00BDE8;
} 
.search-box {
  float:left;
  clear:left;
  width:70%;
  padding:0.4em;
  font-size:1em;
  color:#555;
}

.list-count {
  float:left;
  text-align:center;
  width:30%;
  padding:0.5em;
  color:#ddd;
}



li {
  transition-property: margin, background-color, border-color;
  transition-duration: .4s, .2s, .2s;
  transition-timing-function: ease-in-out, ease, ease;
}

.empty-item {
  transition-property: opacity;
  transition-duration: 0s;
  transition-delay: 0s;
  transition-timing-function: ease;
}

.empty .empty-item {
  transition-property: opacity;
  transition-duration: .2s;
  transition-delay: .3s;
  transition-timing-function: ease;
}

.hiding {
  margin-left:-100%;
  opacity:0.5;
}

.hidden {
  display:none;
}

ul {
  float:left;
  width:100%;
  margin:2em 0;
  padding:0;
  position:relative;
}

ul:before {
  content:'desserts';
  position:absolute;
  left:-2.8em;
  font-size:3em;
  text-align:right;
  top:1.5em;
  color:#ededed;
  font-weight:bold;
  font-family: 'Maven Pro', sans-serif;
  transform:rotate(-90deg);
}

li {
  float:left;
  clear:left;
  width:100%;
  margin:0.2em 0;
  padding:0.5em 0.8em;
  list-style:none;
  background-color:#f2f2f2;
  border-left:5px solid #003842;
  cursor:pointer;
  color:#333;
  position:relative;
  z-index:2;
}

li:hover {
  background-color:#f9f9f9;
  border-color:#00BDE8;
}

.empty-item {
  background:#fff;
  color:#ddd;
  margin:0.2em 0;
  padding:0.5em 0.8em;
  font-style:italic;
  border:none;
  text-align:center;
  visibility:hidden;
  opacity:0;
  float:left;
  clear:left;
  width:100%;
}

.empty .empty-item {
  opacity:1;
  visibility:visible;
}







/*
The following are styles purely for the surroundings
*/



body {
  background-color:#fff;
  font-family:'Open Sans', sans-serif;
  margin:0;
  padding:0;
  font-size:1em;
}

a {color:#00BDE8;}

h1 {
  font-size:2.6em;
  margin:0;
  padding-top:1.5em;
  text-align:center;
  font-family: 'Maven Pro', sans-serif;
}
h3 {
  margin:0 0 2em;
  text-align:center;
font-weight:normal;
font-family: georgia, times;
font-style:italic;
  color:#777;
  font-size:1em;
}

.info {
  float:left;
  width:60%;
  margin:2em 20%;
  padding:2em 0;
  background:#f9f9f9;
  border-left:5px solid #003842;
  padding:10px 20px;
}

.list-wrap {
  float:left;
  width:40%;
  margin:2em 30%;
  padding:2em 0;
}

p {
  text-align:left;
  font-size:1em;
}

.cta {
  float:left;
  width:100%;
  text-align:center;
  color:#999;
  font-family:georgia, times;
  font-style:italic;
  margin:2em 0;
}

.cta a {
  font-size:1.5em;
  font-style:normal;
  font-family: 'Maven Pro', sans-serif;
  text-decoration:none;
  line-height:1.5em;
}

.topdeco {
  float:left;
  width:100%;
  height:10px;
  position:fixed;
  z-index:10;
}

.topdeco span {
  float:left;
  width:25%;
  height:100%;
}

.deco span:nth-child(1) {
  background:#FF8220;
}
.deco span:nth-child(2) {
  background:#000;
}
.deco span:nth-child(3) {
  background:#FFA00A;
}
.deco span:nth-child(4) {
  background:#00BDE8;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="search-text" placeholder="search" class="search-box">
    

<div class="row" id="list">        
          <div class="symbol col-md-2 col-sm-24 col-xs-24">A</div>
          <div class="items col-md-22 col-sm-24 col-xs-24">          
            <a href="/repair/brand/aeg/">
              <div class="brand-list_item"> 
                <div class="border-coner left"></div>
                <span>AEGY</span>
                <div class="border-coner right"></div>
              </div>
            </a>

            <a href="/repair/brand/arzum/">
              <div class="brand-list_item">
                <div class="border-coner left"></div>
                <span>ARZUM</span>
                <div class="border-coner right"></div>
              </div>
            </a>

            <a href="/repair/brand/aurora/">
              <div class="brand-list_item">
                <div class="border-coner left"></div>
                <span>AURORA</span>
                <div class="border-coner right"></div>
              </div>
            </a>

            <a href="/repair/brand/amica/">
              <div class="brand-list_item">
                <div class="border-coner left"></div>
                <span>Amica</span>
                <div class="border-coner right"></div>
              </div>
            </a>

            <a href="/repair/brand/animo/">
              <div class="brand-list_item">
                <div class="border-coner left"></div>
                <span>Animo</span>
                <div class="border-coner right"></div>
              </div>
            </a>

            <a href="/repair/brand/arcelik/">
              <div class="brand-list_item">
                <div class="border-coner left"></div>
                <span>Arcelik</span>
                <div class="border-coner right"></div>
              </div>
            </a>

            <a href="/repair/brand/aresa/">
              <div class="brand-list_item">
                <div class="border-coner left"></div>
                <span>Aresa</span>
                <div class="border-coner right"></div>
              </div>
            </a>

            <a href="/repair/brand/ariete/">
              <div class="brand-list_item">
                <div class="border-coner left"></div>
                <span>Ariete</span>
                <div class="border-coner right"></div>
              </div>
            </a>

            <a href="/repair/brand/ascaso/">
              <div class="brand-list_item">
                <div class="border-coner left"></div>
                <span>Ascaso</span>
                <div class="border-coner right"></div>
              </div>
            </a>

            <a href="/repair/brand/asko/">
              <div class="brand-list_item">
                <div class="border-coner left"></div>
                <span>Asko</span>
                <div class="border-coner right"></div>
              </div>
            </a>

            <a href="/repair/brand/atlanta/">
              <div class="brand-list_item">
                <div class="border-coner left"></div>
                <span>Atlanta</span>
                <div class="border-coner right"></div>
              </div>
            </a>

            <a href="/repair/brand/atlantis/">
              <div class="brand-list_item">
                <div class="border-coner left"></div>
                <span>Atlantis</span>
                <div class="border-coner right"></div>
              </div>
            </a>

          </div> 
  <div class="row" id="list">        
          <div class="symbol col-md-2 col-sm-24 col-xs-24">B</div>
          <div class="items col-md-22 col-sm-24 col-xs-24">          
            <a href="/repair/brand/aeg/">
              <div class="brand-list_item"> 
                <div class="border-coner left"></div>
                <span>BQ</span>
                <div class="border-coner right"></div>
              </div>
            </a>

            <a href="/repair/brand/arzum/">
              <div class="brand-list_item">
                <div class="border-coner left"></div>
                <span>BENC</span>
                <div class="border-coner right"></div>
              </div>
            </a>

            <a href="/repair/brand/aurora/">
              <div class="brand-list_item">
                <div class="border-coner left"></div>
                <span></span>
                <div class="border-coner right"></div>
              </div>
            </a>

            <a href="/repair/brand/amica/">
              <div class="brand-list_item">
                <div class="border-coner left"></div>
                <span>BROWN</span>
                <div class="border-coner right"></div>
              </div>
            </a>

            <a href="/repair/brand/animo/">
              <div class="brand-list_item">
                <div class="border-coner left"></div>
                <span>BLACK</span>
                <div class="border-coner right"></div>
              </div>
            </a>

            <a href="/repair/brand/arcelik/">
              <div class="brand-list_item">
                <div class="border-coner left"></div>
                <span>BORK</span>
                <div class="border-coner right"></div>
              </div>
            </a>

            <a href="/repair/brand/aresa/">
              <div class="brand-list_item">
                <div class="border-coner left"></div>
                <span>BRENDX</span>
                <div class="border-coner right"></div>
              </div>
            </a>

            <a href="/repair/brand/ariete/">
              <div class="brand-list_item">
                <div class="border-coner left"></div>
                <span>BOEING</span>
                <div class="border-coner right"></div>
              </div>
            </a>

            <a href="/repair/brand/ascaso/">
              <div class="brand-list_item">
                <div class="border-coner left"></div>
                <span>BULL</span>
                <div class="border-coner right"></div>
              </div>
            </a>

            <a href="/repair/brand/asko/">
              <div class="brand-list_item">
                <div class="border-coner left"></div>
                <span>BESTA</span>
                <div class="border-coner right"></div>
              </div>
            </a>

            <a href="/repair/brand/atlanta/">
              <div class="brand-list_item">
                <div class="border-coner left"></div>
                <span>BOOM</span>
                <div class="border-coner right"></div>
              </div>
            </a>

            <a href="/repair/brand/atlantis/">
              <div class="brand-list_item">
                <div class="border-coner left"></div>
                <span>BOX</span>
                <div class="border-coner right"></div>
              </div>
            </a>

          </div> 
        </div>

1 ответ 1

0

Скрывать родительский блок, после ребенка, если в ребенке нет совпадения

if(/* нет совпадения */){
    $('.children').fadeOut(2000, ()=>{
        $('.children').parents('.row:first').fadeOut(1000);
    });
}

Стандартное значение .fadeOut - 400ms

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.