БЛОГ НА HUSL


как определить кол-во записей после filter()

Автор вопроса: rabbit

Помогите пожалуйста определить кол-во записей с идентичным классом внутри контейнера. Суть в следующем. Есть контейнер, внутри которого некоторое количество дочерних контейнеров с одним и тем же классом. Стояла задача реализовать фильтрацию по введенному запросу в input. Фильтрация работает. Код весь приведу ниже. Но проблема в том, что после фильтрации не могу определить кол-во записей после фильтрации. И не могу понять, как реализовать выделение текста (любым цветом) введенного в input, в отфильтрованных контейнерах. Поделитесь знаниями, пожалуйста. Спасибо.

Пробовал вот так (не помогло): console.log($(".middle_content_blog_content_blocks_content .middle_content_blog_content_blocks_content_block").length);

$(document).ready(function () {

$('.middle_content_blog_content_blocks_search_edit').keyup(function(){
        let value = $(this).val().toLowerCase();
         $(".middle_content_blog_content_blocks_content_block").filter(function() {
         $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
         });
    });

});
.middle_content_blog {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 100%;
}

.middle_content_blog_content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 1300px;
  max-width: 1300px;
  height: auto;
  padding: 50px 0 100px 0;
}

.middle_content_blog_content_text {
  align-items: start;
  width: 100%;
  font-family: RobotoCondensed;
  font-style: normal;
  font-weight: normal;
  font-size: 48px;
  line-height: 56px;
  color: #000000;
}

.middle_content_blog_content_blocks {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: auto;
  margin: 50px 0 0 0;
}

.middle_content_blog_content_blocks_content {
  display: grid;
  grid-template-rows: repeat(1, 1fr);
  grid-row-gap: 50px;
}

.middle_content_blog_content_blocks_content_block {
  display: flex;
  flex-direction: row;
  align-items: start;
}

.middle_content_blog_content_blocks_content_block_info {
  display: flex;
  flex-direction: column;
  width: 450px;
  padding: 0 0 0 50px;
}

.middle_content_blog_content_blocks_content_block_info_date {
  font-family: RobotoCondensed;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 16px;
  color: #878787;
}

.middle_content_blog_content_blocks_content_block_info_name {
  font-family: RobotoCondensed;
  font-style: normal;
  font-weight: normal;
  font-size: 24px;
  line-height: 28px;
  color: #B72A20;
  margin: 10px 0 0 0;
}

.middle_content_blog_content_blocks_content_block_info_metatags {
 display: flex;
 flex-direction: row;
 margin: 10px 0 0 0;
}

.middle_content_blog_content_blocks_content_block_info_metatags_metatag {
  width: auto;
  height: auto;
  background-color: #878787;
  padding: 5px 10px 5px 10px;
  margin: 0 10px 0 0;
}

.middle_content_blog_content_blocks_content_block_info_metatags_metatag_text {
  font-family: RobotoCondensed;
  font-style: normal;
  font-weight: bold;
  font-size: 12px;
  line-height: 14px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #FFFFFF;
}

.middle_content_blog_content_blocks_content_block_info_description {
  font-family: RobotoCondensed;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 19px;
  color: #000000;
  margin: 20px 0 0 0;
}

.middle_content_blog_content_blocks_content_block_info_next {
  width: fit-content;
  font-family: RobotoCondensed;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 16px;
  color: #B72A20;
  margin: 30px 0 0 0;
}

.middle_content_blog_content_blocks_search {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 400px;
  height: 150px;
  border: 1px solid #878787;
  box-sizing: border-box;
  border-radius: 30px;
  padding: 25px 25px 25px 25px;
}

.middle_content_blog_content_blocks_search_text {
  font-family: RobotoCondensed;
  font-style: normal;
  font-weight: normal;
  font-size: 24px;
  line-height: 28px;
  color: #000000;
}

.middle_content_blog_content_blocks_search_edit {
  background: url("/img/icons/ico-search.png");
  background-repeat: no-repeat;
  background-position: 95% center;
  width: 100%;
  height: 50px;
  font-size: 16px;
  border: 1px solid #878787;
  box-sizing: border-box;
  border-radius: 30px;
  outline: none;
  padding: 0 45px 0 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <div class="middle_content_blog">
                <div class="middle_content_blog_content">
                    <span class="middle_content_blog_content_text">
                        Блог
                    </span>
                    <div class="middle_content_blog_content_blocks">
                        <div class="middle_content_blog_content_blocks_content">
                            <div class="middle_content_blog_content_blocks_content_block">
                                <img src="https://bipbap.ru/wp-content/uploads/2019/05/1532440298_3.jpg" alt="">
                                <div class="middle_content_blog_content_blocks_content_block_info">
                                    <span class="middle_content_blog_content_blocks_content_block_info_date">
                                        1111111
                                    </span>
                                    <span class="middle_content_blog_content_blocks_content_block_info_name">
                                        111
                                    </span>
                                    <div class="middle_content_blog_content_blocks_content_block_info_metatags">
                                        <div
                                            class="middle_content_blog_content_blocks_content_block_info_metatags_metatag">
                                            <span
                                                class="middle_content_blog_content_blocks_content_block_info_metatags_metatag_text">
                                                11
                                            </span>
                                        </div>
                                        <div
                                            class="middle_content_blog_content_blocks_content_block_info_metatags_metatag">
                                            <span
                                                class="middle_content_blog_content_blocks_content_block_info_metatags_metatag_text">
                                                22
                                            </span>
                                        </div>
                                    </div>
                                    <span class="middle_content_blog_content_blocks_content_block_info_description">
                                        000
                                        детали.
                                    </span>
                                    <a class="middle_content_blog_content_blocks_content_block_info_next" href="#">
                                        Читать далее...
                                    </a>
                                </div>
                            </div>
                            <div class="middle_content_blog_content_blocks_content_block">
                                <img src="https://bipbap.ru/wp-content/uploads/2019/05/1532440298_3.jpg" alt="">
                                <div class="middle_content_blog_content_blocks_content_block_info">
                                    <span class="middle_content_blog_content_blocks_content_block_info_date">
                                        1111222222
                                    </span>
                                    <span class="middle_content_blog_content_blocks_content_block_info_name">
                                        223232323232323
                                    </span>
                                    <div class="middle_content_blog_content_blocks_content_block_info_metatags">
                                        <div
                                            class="middle_content_blog_content_blocks_content_block_info_metatags_metatag">
                                            <span
                                                class="middle_content_blog_content_blocks_content_block_info_metatags_metatag_text">
                                                11
                                            </span>
                                        </div>
                                        <div
                                            class="middle_content_blog_content_blocks_content_block_info_metatags_metatag">
                                            <span
                                                class="middle_content_blog_content_blocks_content_block_info_metatags_metatag_text">
                                                33
                                            </span>
                                        </div>
                                    </div>
                                    <span class="middle_content_blog_content_blocks_content_block_info_description">
                                       222
                                    </span>
                                    <a class="middle_content_blog_content_blocks_content_block_info_next" href="#">
                                        Читать далее...
                                    </a>
                                </div>
                            </div>
                            <div class="middle_content_blog_content_blocks_content_block">
                                <img src="https://klike.net/uploads/posts/2019-07/1562069947_1.jpg" alt="">
                                <div class="middle_content_blog_content_blocks_content_block_info">
                                    <span class="middle_content_blog_content_blocks_content_block_info_date">
                                        555
                                    </span>
                                    <span class="middle_content_blog_content_blocks_content_block_info_name">
                                       444
                                    </span>
                                    <div class="middle_content_blog_content_blocks_content_block_info_metatags">
                                        <div
                                            class="middle_content_blog_content_blocks_content_block_info_metatags_metatag">
                                            <span
                                                class="middle_content_blog_content_blocks_content_block_info_metatags_metatag_text">
                                                77
                                            </span>
                                        </div>
                                        <div
                                            class="middle_content_blog_content_blocks_content_block_info_metatags_metatag">
                                            <span
                                                class="middle_content_blog_content_blocks_content_block_info_metatags_metatag_text">
                                                55
                                            </span>
                                        </div>
                                    </div>
                                    <span class="middle_content_blog_content_blocks_content_block_info_description">
                                        99
                                    </span>
                                    <a class="middle_content_blog_content_blocks_content_block_info_next" href="#">
                                        Читать далее...
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="middle_content_blog_content_blocks_search">
                            <div class="middle_content_blog_content_blocks_search_text">
                                Поиск по блогу
                            </div>
                            <input type="text" class="middle_content_blog_content_blocks_search_edit">
                        </div>
                    </div>
                </div>
            </div>


Источник

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

Автор решения: OPTIMUS PRIME

.filter() вы используете не по назначению: Просто для перебора.
Поэтому заменил его на .each()

keyup срабатывает только когда отпускают кнопку. Т.е. копипаст, авто-заполнение — пойдут мимо. А событие input будет запукаться при любом изменении значения.

Во время перебора, на все ненужные блоки можно повесить класс-невидимку, и потом достать количество оставшихся через $('.box').not('.invis').length

Ну или $('.box').length - $('.invis').length ))

Сокращенный пример:

$('.input').on('input', function() {  
  $('.highlight').each(function() {
    // Стирает всё, что ранее было подсвечено.
    this.outerHTML = this.innerHTML;
  });
  
  
  let value = $(this).val().toLowerCase();
  
  $('.box').each(function() {
    let noMatch = ( $(this).text().toLowerCase().indexOf(value) === -1 );
    
    if( noMatch ) {
      $(this).addClass('invis');
      return;
    }
    
    /***/    
    
    $(this).removeClass('invis');
    
    if( value ) { // пустую строку не пропускаем под краску
      let regex = new RegExp( "(" + value + ")", "g" );
      // См. → "Регулярные выражения", "Группы захвата"
      // Всё, что найдено внутри скобок, ниже в replace достается через `$1`
      
      let html = this.innerHTML.replace(regex, '<span class="highlight">$1</span>');
      
      this.innerHTML = html;
    }
  });
  
  console.clear();
  console.log( $('.box').not('.invis').length )
});
.invis {
  display: none;
}

.highlight {
  color: red;
  background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input class="input">

<div class="box">aaa bbb mmm</div>
<div class="box">abcdefghijk</div>
<div class="box">lmnopqrstuv</div>
<div class="box">wxyza</div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.