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.location
s 及其匹配数吗?
是的!因此,如果值相同,那么它将填充到 .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) => Date.parse($(d).data('value'))).sort())
以上是关于jQuery匹配值的主要内容,如果未能解决你的问题,请参考以下文章
如何根据用户当前输入以编程方式访问匹配值列表 - jQuery Autocomplete?