您好,我正在尝试执行 if 语句来查看数组中的值是否完全匹配。然后我希望它的同级元素能够显示精确匹配的 html。有人可以帮忙吗!我使用 TWIG 作为高级自定义字段 Wordpress 插件的 HTML。我只想说一次的所有地点的图片以及它们被提及的次数。 https://i.stack.imgur.com/klbDa.png这是为了过滤功能。最终想要一个像这样的下拉菜单https://codepen.io/luciopaiva/pen/YXYGYE?editors=101 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>
所以我会使用收集所有值.map https://api.jquery.com/map/进而.reduce https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)