jQuery按首字母过滤帖子 - 按字母顺序

Question

我有一个源自WooCommerce的产品列表，作为自定义帖子(使用页面构建器Elementor(拉入：http://staging.morningsidepharm.com/products/generic-medicines/

我使用了一个插件来尝试添加一个按字母顺序排列的过滤器，但这对我不起作用(我认为是因为我将产品显示为帖子(，所以我想我会使用 jquery 来构建一个。

我找到了以下代码：

.HTML

<button class="active btn" id="all">Show All</button>
<button class="btn" id="a">Show A</button>
<button class="btn" id="b">Show B</button>
<button class="btn" id="c">Show C</button>
<button class="btn" id="d">Show D</button>
<div class="spacer"></div>
<div id="parent">
<div class="box a b">A &amp; B</div>
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
</div>

.CSS

* {
box-sizing: border-box;
}
body {
padding: 10px;
background: #ecf0f1;
font-family: helvetica, sans-serif;
font-weight: 200;
}
.btn {
border: none;
background: linear-gradient(to bottom, #3498db, #2980b9);
border-radius: 3px;
font-family: Arial;
color: #ffffff;
padding: 5px 10px 5px 10px;
text-decoration: none;
margin: 5px;
}
.active {
background: linear-gradient(to bottom, #3cb0fd, #3498db);
text-decoration: none;
}
.box {
background-image: linear-gradient(to bottom, #3498db, #2980b9);
padding: 10px;
height: 100px;
width: calc(25% - 10px);
float: left;
margin: 5px;
text-align: center;
border-radius: 3px;
color: #fff;
}
.spacer {
clear: both;
height: 20px;
}

.JS

var $btns = $('.btn').click(function() {
if (this.id == 'all') {
$('#parent > div').fadeIn(450);
} else {
var $el = $('.' + this.id).fadeIn(450);
$('#parent > div').not($el).hide();
}
$btns.removeClass('active');
$(this).addClass('active');
})

可以在这里看到：https://codepen.io/terf/pen/vGeqC

这似乎有效，因为每个div 都有一个 a、b、c、d 等类。

但是，就我而言，我的每个容器div 都有相同的类，但会有一个唯一的 h3 标题，例如：

<div class="product"><h3>Acarbose</h3></div>
<div class="product"><h3>Bicalutamide</h3></div>
<div class="product"><h3>Capecitabine</h3></div>
<div class="product"><h3>Dapsone</h3></div>

所以我认为，为了完成这项工作，我需要 jQuery 在每个产品div 中读取 h3 的第一个字母，然后仅在按下字母过滤器时显示相应的产品。

或者将产品的名称作为类添加到div 中？

我知道这只是一个起点，可能有一种更简单的方法来实现这一点，所以任何帮助将不胜感激。

Answer 1

您从单击按钮的id中获取要搜索的第一个字母。因此，您可以通过正则表达式filter().product元素，以确保它们以该字母开头，如下所示：

var $boxes = $('#parent > .box');
var $btns = $('.btn').click(function() {
var id = this.id;
if (id == 'all') {
$boxes.fadeIn(450);
} else {
$boxes.fadeOut(450).filter(function() {
var re = new RegExp('^' + id, 'i');
return re.test($(this).text().trim());
}).stop(true).fadeIn(450);
}
$btns.removeClass('active');
$(this).addClass('active');
})

* {
box-sizing: border-box;
}
body {
padding: 10px;
background: #ecf0f1;
font-family: helvetica, sans-serif;
font-weight: 200;
}
.btn {
border: none;
background: linear-gradient(to bottom, #3498db, #2980b9);
border-radius: 3px;
font-family: Arial;
color: #ffffff;
padding: 5px 10px 5px 10px;
text-decoration: none;
margin: 5px;
}
.active {
background: linear-gradient(to bottom, #3cb0fd, #3498db);
text-decoration: none;
}
.box {
background-image: linear-gradient(to bottom, #3498db, #2980b9);
padding: 10px;
height: 100px;
width: calc(25% - 10px);
float: left;
margin: 5px;
text-align: center;
border-radius: 3px;
color: #fff;
}
.spacer {
clear: both;
height: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="active btn" id="all">Show All</button>
<button class="btn" id="a">Show A</button>
<button class="btn" id="b">Show B</button>
<button class="btn" id="c">Show C</button>
<button class="btn" id="d">Show D</button>
<div class="spacer"></div>
<div id="parent">
<div class="box">
<h3>Acarbose</h3>
</div>
<div class="box">
<h3>Bicalutamide</h3>
</div>
<div class="box">
<h3>Capecitabine</h3>
</div>
<div class="box">
<h3>Dapsone</h3>
</div>
</div>