Как при выборе города показывать только первый элемент из этого города?

Question

[Ilo555]

Есть код рабочего фильтра по городам, выводит список карточек из этого города. Как сделать чтобы при выборе города показывалась только первая карточка, а не все ?

<container>
     <div class="order_contant"></div>
     <div class="order_contant"></div>
     <div class="order_contant"></div>
</container>

<code lang="html">
<div class="autocomplite_input">
            <div contentEditable=true data-text="Выберите регион" class="modal-open" id="modalmd"></div>
            <div class="modal" id="modal1">
              <div class="dialog">
                <div class="header_content_modal">
                  <p class="header_modal">Выберите регион заявок</p>
                  <div class="close_btn" id="close_cont">
                    <i class="fas fa-times"></i>
                  </div>
                </div>
                <ul class="content_item">
                  <li class="selected headmd">
                    <div class="text_item" data-filter="all" id="namecity">Любой регион</div>
                  </li>
                  <li class="selected">
                    <div class="text_item" data-filter="Altajskij" id="namecity">Алтайский край</div>
                  </li>
                  <li class="selected">
                    <div class="text_item" data-filter="Belgorodskaja" id="namecity">Белгородская область</div>
                  </li>
                  <li class="selected">
                    <div class="text_item" data-filter="Brjanskaja">Брянская область</div>
                  </li>
                  <li class="selected">
                    <div class="text_item" data-filter="Vladimirskaja">Владимирская область</div>
                  </li>
                  <li class="selected">
                    <div class="text_item" data-filter="Volgogradskaja">Волгоградская область</div>
                  </li>
                  <li class="selected">
                    <div class="text_item" data-filter="Vologodskaja">Вологодская область</div>
                  </li>
                  </li>
                </ul>
              </div>
            </div>
          </div>
</code>



<code lang="javascript">
function app() {
	const text_item = document.querySelectorAll('.text_item')
	const order_contant = document.querySelectorAll('.order_contant')

	function filter(category, items) {
		items.forEach((item) => {
			const isItemFiltered = !item.classList.contains(category)
			const isShowAll = category.toLowerCase() === 'all'
			if (isItemFiltered && !isShowAll) {
				item.classList.add('hide')
			} else {
				item.classList.remove('hide')
			}
		})
	}

	text_item.forEach((text_item) => {
		text_item.addEventListener('click', () => {
			const currentCategory = text_item.dataset.filter
			filter(currentCategory, order_contant)
		})
	})

}


app()
</code>

Answer 1

[ThunderCat]

хз кто такие карточки и что за города, научитесь при постановке задачи абстрагироваться от "менеджерского" сленга, и описывать сущности реальными названиями - карточки это судя по всему элементы хтмл с нужным классом? Города - это значения селекта?

Подозреваю что что-то типа

f (isItemFiltered && !isShowAll) {
        item.classList.add('hide');
      } else {
        item.classList.remove('hide');
        break;
      }