Фильтрация элементов с начала строки кнопки

Как я могу включить код, чтобы начать фильтрацию с начала текста кнопок?

Как видите, сейчас происходит фильтрация всех писем, где бы они ни находились. Например, при передаче as-фильтра я также получаю North America, а это не то, что мне нужно.

function checkFilter(filter) {
  const jqCollection = $('.list .list-item:contains(' + filter + ')');
  if (jqCollection.length) {
    jqCollection.css("background",'red');
  }
}

checkFilter('a');

body{	padding:30px;}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "list">
	<button class = "list-item" type = "button">Africa</button>
	<button class = "list-item" type = "button">Antarctica</button>
	<button class = "list-item" type = "button">Asia</button>
	<button class = "list-item" type = "button">Europe</button>
	<button class = "list-item" type = "button">North America</button>
	<button class = "list-item" type = "button">Australia</button>
	<button class = "list-item" type = "button">South America</button>
</div>

Взгляните на лучшие ответы на этот вопрос: stackoverflow.com/questions/2012299/contain-start-by

— 17.06.2019 22:24

javascript jquery

17.06.2019 22:16

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вот ванильный JS вместе с ES6 String.prototype.startsWith:

function checkFilter(filter) {
  const jqCollection = [...document.querySelectorAll('.list .list-item')] // get all list-items
    .filter(el => // now filter them
      el.textContent
      .toLowerCase() // keeping an element only if it's lower-cased textcontent
      .startsWith(filter.toLowerCase()) // starts with the lower-cased letter passed as "filter"
    );
  jqCollection.forEach(el => el.style.backgroundColor = 'red'); // now iterate over the filtered result
}

checkFilter('a');

body {
  padding: 30px;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "list">
  <button class = "list-item" type = "button">Africa</button>
  <button class = "list-item" type = "button">Antarctica</button>
  <button class = "list-item" type = "button">Asia</button>
  <button class = "list-item" type = "button">Europe</button>
  <button class = "list-item" type = "button">North America</button>
  <button class = "list-item" type = "button">Australia</button>
  <button class = "list-item" type = "button">South America</button>
</div>

17.06.2019 22:24

Ответ принят как подходящий

Просто не используйте .contains(), а вместо этого используйте .indexOf и посмотрите, равен ли результат 0. Для такой простой операции JQuery не нужен.

function checkFilter(filter) {
  const buttons = [].slice.call(document.querySelectorAll("button.list-item"));
  buttons.forEach(function(btn){
    if (btn.textContent.toLowerCase().indexOf(filter) === 0){
      btn.classList.add("match");
    } 
  });
}

checkFilter('a');

body{	padding:30px;}
.match { background: red; }

<div class = "list">
	<button class = "list-item" type = "button">Africa</button>
	<button class = "list-item" type = "button">Antarctica</button>
	<button class = "list-item" type = "button">Asia</button>
	<button class = "list-item" type = "button">Europe</button>
	<button class = "list-item" type = "button">North America</button>
	<button class = "list-item" type = "button">Australia</button>
	<button class = "list-item" type = "button">South America</button>
</div>

Вряд ли для чего-то еще нужен jQuery, за исключением иногда таблиц данных jQuery.

— 17.06.2019 22:30

Спасибо, Скотт, не могли бы вы также сообщить мне, почему корпус фильтра чувствителен? Например, checkFilter('A'); ничего не возвращает

— 17.06.2019 22:34

Строки @MonaCoder чувствительны к регистру. В своем ответе я беру текст, который вы хотите найти, и принудительно преобразую его в новую строку, состоящую из строчных букв (вызов метода .toLowerCase()), а затем сравниваю ее со строкой фильтра нижнего регистра "a". Это гарантирует, что независимо от того, как написан текст, если вы всегда передаете filter строку в нижнем регистре, у вас никогда не возникнет ситуация несоответствия регистра.

— 17.06.2019 22:48

17.06.2019 22:28