Jquery совпадающих значений - PullRequest
Новая
       34

Jquery совпадающих значений

0 голосов
/ 27 апреля 2020

Привет. Я пытаюсь сделать оператор if, чтобы увидеть, имеют ли значения точное совпадение в массиве. Затем я хочу, чтобы элемент-брат показал html того, что является точным соответствием. Может кто-нибудь помочь, пожалуйста! Я использую TWIG для HTML из плагина Advanced Custom Fields Wordpress. Изображение всех мест, которые я хочу сказать только один раз, с указанием количества упоминаний. Это для функциональности фильтра. В конце концов вы хотите иметь выпадающий список типа https://codepen.io/luciopaiva/pen/YXYGYE?editors=101 с вкладкой местоположений.

Jquery

 //exact match
 $(".filter-dropdown .course-location").each(function(i,e) {
  myDivObj = $(this).val() == $(this).val();
    if ($(this).val() == $(this).val()) {
      console.log()
      $(this).parent('.filter-dropdown').siblings('.class-location').children('h4').html(myDivObj);
      $(this).parent('.filter-dropdown').siblings('.class-location').children('span').html($(".course-location").length);
    }
    else {

      console.log('unknown');
    }
  });

HTML

             <div class="filter" id="course-location">
              <div class="upper-filter"><h3>Locations</h3><i class="fas fa-angle-down"></i></div>
              {% for category in bloc.training_course_list_compact.course_categories %}
              {% for locationcourse in category.get_field('courses') %}
              {% for location in locationcourse.get_field('dates') %}
              <div class="filter-dropdown">
                <div class="course-location" value="{{ location.location }}"></div>
              </div>
              {% endfor %}
              {% endfor %}
              {% endfor %}
                <div class="class-location"><h4></h4><p></p><span></span></div>
            </div>

1 Ответ

0 голосов
/ 28 апреля 2020

Итак, я бы собрал все значения, используя .map, а затем .reduce, в объект в формате { city: count }. Наконец, вы можете создать html элементов и вставить их в DOM. 

// Extract the values to an array
let locations = $('.course-location').map((i, e) => $(e).data('value')).toArray();

let reducer = (a, c) => {
  // If the city doesn't exist 
  a[c] === undefined ?
    a[c] = 1 : // One occurrence, else
    a[c] = a[c] + 1;  // Increment count
  return a;
}

let location_count = locations.reduce(reducer, {});

// Create HTML Elements
for (var place in location_count) {
  $('.class-location').append(`<h4>${place}</h4><span>${location_count[place]}</span>`)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="course-location" data-value="Crowley, Texas"></div>
<div class="course-location" data-value="Denver, Colorado"></div>
<div class="course-location" data-value="Houston, TX"></div>
<div class="course-location" data-value="Denver, Colorado"></div>
<div class="course-location" data-value="Dallas, Texas"></div>
<div class="course-location" data-value="Crowley, Texas"></div>

 <div class="class-location"></div>
...