jQuery匹配值

Posted

技术标签:

【中文标题】jQuery匹配值【英文标题】:Jquery matching values 【发布时间】:2020-08-11 12:51:45 【问题描述】:

您好,我正在尝试执行 if 语句来查看值是否在数组中完全匹配。然后我希望它的兄弟元素显示完全匹配的 html。有人可以帮忙吗!我将 TWIG 用于高级自定义字段 Wordpress 插件中的 HTML。 Image of all the locations that I want to say only once with the number of times they are mentioned. 这是一个过滤器功能。最终希望有一个像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>

【问题讨论】:

那么...您想收集唯一的location.locations 及其匹配数吗? 是的!因此,如果值相同,那么它将填充到 .class-location div 中并显示该特定匹配的匹配数。 【参考方案1】:

所以我将使用.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>

【讨论】:

所以我对日期做了同样的事情,你知道我如何按最近的日期过滤它们吗?它的格式类似于 2020 年 2 月 26 日。地点按字母顺序排列? @mgonz 转换为Date.sort 我在哪里转换这个?? 让位置 = $('.course-location').date((i, e) => $(e).sort('value')).toArray(); @mgonz 如果日期格式是可解析的,类似这样:let unique_dates = new Set($('course-date').map((i, d) =&gt; Date.parse($(d).data('value'))).sort())

以上是关于jQuery匹配值的主要内容,如果未能解决你的问题,请参考以下文章

jQuery - 如果值与数组中的元素匹配,则禁用复选框

如何根据用户当前输入以编程方式访问匹配值列表 - jQuery Autocomplete?

需要使用 jquery 对具有部分文本字段名称的值进行匹配并返回结果

Jquery如何匹配两个变量的值

jQuery学习笔记使用选择器二

jQuery常用知识