Как найти схожее значения в DOM элементах?

248
26 сентября 2018, 06:10

Хочу добавить активный класс в список с городами, как это сделать, ниже приведен мой код:

var cityChose = $('.region-show').text(); 
 
var geolocationCity = $('.geolocation__list li a').attr('data-city'); 
 
alert(cityChose); 
alert(geolocationCity); 
 
if (cityChose === geolocationCity) { 
  $('.geolocation__list a').addClass('active'); 
}
.active { 
  color: red; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
 
<div class="region-show">Владивосток</div> 
 
<br><hr><br> 
 
<ul class="geolocation__list"> 
  <li><a class="city" data-city="Москва">Москва</a></li> 
  <li><a class="city" data-city="Санкт-Петербург">Санкт-Петербург</a></li> 
  <li><a class="city" data-city="Алматы">Алматы</a></li> 
  <li><a class="city" data-city="Барнаул">Барнаул</a></li> 
  <li><a class="city" data-city="Владивосток">Владивосток</a></li> 
  <li><a class="city" data-city="Владимир">Владимир</a></li> 
  <li><a class="city" data-city="Воронеж">Воронеж</a></li> 
  <li><a class="city" data-city="Екатеринбург">Екатеринбург</a></li> 
  <li><a class="city" data-city="Казань">Казань</a></li> 
  <li><a class="city" data-city="Калининград">Калининград</a></li> 
  <li><a class="city" data-city="Кемерово">Кемерово</a></li> 
  <li><a class="city" data-city="Новосибирск">Новосибирск</a></li> 
  <li><a class="city" data-city="Омск">Омск</a></li> 
</ul>

Получается лишь получить у DIV значение, а вот значение по всему списку получить не могу, получаю только первый результат, что бы сравнить если значения одинаковы, то добавляем класс к пункту в списке.

Answer 1

Вам нужно воспользоваться любым циклом, например .each:

var cityChose = $('.region-show').text(); 
 
var geolocationCities = $('.geolocation__list li a'); 
 
geolocationCities.each(function(i, el){ 
  if (cityChose === $(el).attr('data-city')) { 
    $(el).addClass('active'); 
  } 
})
.active { 
  color: red; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
 
<div class="region-show">Владивосток</div> 
 
<br><hr><br> 
 
<ul class="geolocation__list"> 
  <li><a class="city" data-city="Москва">Москва</a></li> 
  <li><a class="city" data-city="Санкт-Петербург">Санкт-Петербург</a></li> 
  <li><a class="city" data-city="Алматы">Алматы</a></li> 
  <li><a class="city" data-city="Барнаул">Барнаул</a></li> 
  <li><a class="city" data-city="Владивосток">Владивосток</a></li> 
  <li><a class="city" data-city="Владимир">Владимир</a></li> 
  <li><a class="city" data-city="Воронеж">Воронеж</a></li> 
  <li><a class="city" data-city="Екатеринбург">Екатеринбург</a></li> 
  <li><a class="city" data-city="Казань">Казань</a></li> 
  <li><a class="city" data-city="Калининград">Калининград</a></li> 
  <li><a class="city" data-city="Кемерово">Кемерово</a></li> 
  <li><a class="city" data-city="Новосибирск">Новосибирск</a></li> 
  <li><a class="city" data-city="Омск">Омск</a></li> 
</ul>

Answer 2

При получении значения методом .attr получается только значение первого элемента в коллекции, об этом написано в описании метода:

Get the value of an attribute for the first element in the set of matched elements

Вместо этого нужно пробежаться по элементам коллекции и добавить класс тем, чей атрибут совпадает с нужным значением, для этого можно воспользоваться методом each

var cityChose = $('.region-show').text(); 
 
var geolocationCity = $('.geolocation__list li a'); 
geolocationCity.each((i, v) => { 
  if ($(v).attr('data-city') == cityChose) { 
    $(v).addClass('active'); 
  } 
})
.active { 
  color: red; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
 
<div class="region-show">Владивосток</div> 
 
<br> 
<hr><br> 
 
<ul class="geolocation__list"> 
  <li><a class="city" data-city="Москва">Москва</a></li> 
  <li><a class="city" data-city="Санкт-Петербург">Санкт-Петербург</a></li> 
  <li><a class="city" data-city="Алматы">Алматы</a></li> 
  <li><a class="city" data-city="Барнаул">Барнаул</a></li> 
  <li><a class="city" data-city="Владивосток">Владивосток</a></li> 
  <li><a class="city" data-city="Владимир">Владимир</a></li> 
  <li><a class="city" data-city="Воронеж">Воронеж</a></li> 
  <li><a class="city" data-city="Екатеринбург">Екатеринбург</a></li> 
  <li><a class="city" data-city="Казань">Казань</a></li> 
  <li><a class="city" data-city="Калининград">Калининград</a></li> 
  <li><a class="city" data-city="Кемерово">Кемерово</a></li> 
  <li><a class="city" data-city="Новосибирск">Новосибирск</a></li> 
  <li><a class="city" data-city="Омск">Омск</a></li> 
</ul>

Также можно воспользоваться методом addClass, который может принимать функцию в качестве параметра:

var cityChose = $('.region-show').text(); 
 
var geolocationCity = $('.geolocation__list li a'); 
 
geolocationCity.addClass(function(i, className) { 
  if ($(this).attr('data-city') == cityChose) { 
    return className + ' ' + 'active'; 
  } 
  return className; 
})
.active { 
  color: red; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
 
<div class="region-show">Владивосток</div> 
 
<br> 
<hr><br> 
 
<ul class="geolocation__list"> 
  <li><a class="city" data-city="Москва">Москва</a></li> 
  <li><a class="city" data-city="Санкт-Петербург">Санкт-Петербург</a></li> 
  <li><a class="city" data-city="Алматы">Алматы</a></li> 
  <li><a class="city" data-city="Барнаул">Барнаул</a></li> 
  <li><a class="city" data-city="Владивосток">Владивосток</a></li> 
  <li><a class="city" data-city="Владимир">Владимир</a></li> 
  <li><a class="city" data-city="Воронеж">Воронеж</a></li> 
  <li><a class="city" data-city="Екатеринбург">Екатеринбург</a></li> 
  <li><a class="city" data-city="Казань">Казань</a></li> 
  <li><a class="city" data-city="Калининград">Калининград</a></li> 
  <li><a class="city" data-city="Кемерово">Кемерово</a></li> 
  <li><a class="city" data-city="Новосибирск">Новосибирск</a></li> 
  <li><a class="city" data-city="Омск">Омск</a></li> 
</ul>

Ну и всегда можно сразу выбрать нужные элементы, к которым уже будет применяться addClass:

var cityChose = $('.region-show').text(); 
 
$(`.geolocation__list li a[data-city=${cityChose}]`).addClass('active');
.active { 
  color: red; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
 
<div class="region-show">Владивосток</div> 
 
<br> 
<hr><br> 
 
<ul class="geolocation__list"> 
  <li><a class="city" data-city="Москва">Москва</a></li> 
  <li><a class="city" data-city="Санкт-Петербург">Санкт-Петербург</a></li> 
  <li><a class="city" data-city="Алматы">Алматы</a></li> 
  <li><a class="city" data-city="Барнаул">Барнаул</a></li> 
  <li><a class="city" data-city="Владивосток">Владивосток</a></li> 
  <li><a class="city" data-city="Владимир">Владимир</a></li> 
  <li><a class="city" data-city="Воронеж">Воронеж</a></li> 
  <li><a class="city" data-city="Екатеринбург">Екатеринбург</a></li> 
  <li><a class="city" data-city="Казань">Казань</a></li> 
  <li><a class="city" data-city="Калининград">Калининград</a></li> 
  <li><a class="city" data-city="Кемерово">Кемерово</a></li> 
  <li><a class="city" data-city="Новосибирск">Новосибирск</a></li> 
  <li><a class="city" data-city="Омск">Омск</a></li> 
</ul>

Answer 3

Опередили:) Вот работающий код: Обратите внимание что element - это не объект jquery, а объект DOM

  $(document).ready(function() {
            var cityChose = $('.region-show').text();
            var geolocationCitys = $('.geolocation__list li a');
            for (let i=0;i<geolocationCitys.length;i++) {
                let element=geolocationCitys[i];
                let tgt=element.getAttribute('data-city');
                if (tgt == cityChose) {
                    element.classList.add('active');
                    break;
                }
            }
        });
READ ALSO
Заменить пробелы в строке на тире
jQuery

Заменить пробелы в строке на тире

Например, у меня есть строка Фрукты на продажу, и мне нужно получить строку в таком виде - Фрукты-на-продажуКак это можно реализовать?

 207
отсортировать таблицу по цене
jQuery

отсортировать таблицу по цене

Есть таблица

 254
C# Ubuntu 16.04 ошибка сборки
c#

C# Ubuntu 16.04 ошибка сборки

При попытке запуска командой dotnet run возникает следующая ошибка

 195
&ldquo;Поймать&rdquo; ошибку цикла for
c#

“Поймать” ошибку цикла for

Всем доброго времени суток!

 253