[英]Filter users by data-attribute Jquery
I am trying to filter users by its data attribute , I have main div called user-append
which contains users that I get from ajax get request , there can be 3 users or 100 users, its dynamical , this is my div with one user for the moment我正在尝试通过其数据属性过滤用户,我有一个名为
user-append
主 div,其中包含我从 ajax get 请求中获取的用户,可以有 3 个用户或 100 个用户,它是动态的,这是我的一个用户的 div此时此刻
<div id="user-append">
<div class="fc-event draggable-user" data-profesion="'+user.profesion+'" id="user_'+user.id+'" style="z-index: 9999;">
<div class="container-fluid">
<input type="hidden" value="'+user.id+'" id="user_'+ user.id + '_value" class="userId">
<div class="row" style="justify-content: center;">
<div class="col-xs-3 avatar-col">
<div class="innerAvatarUserLeft">
<img src="'+getUserImage(user.avatar)+'" width="100%" style="margin: 0 auto;">
</div>
</div>
<div class="col-xs-9 data-col">
<p class="fullName dataText">'+user.fullName+'</p>
<p class="usr_Gender dataText">Male</p>
<div style="position: relative">
<li class="availableUnavailable"></li>
<li class="usr_profesion dataText">AVAILABLE</li>
</div>
<p class="user_id" style="float:right;margin: 3px">'+user.employee_id+'</p>
</div>
</div>
</div>
</div>
</div>
as you can see I have data-profesion
attribute from which I am trying to filter users depend on the profession that they have , I get the ajax request like this如您所见,我有
data-profesion
属性,我试图从中过滤用户,这取决于他们拥有的职业,我收到了这样的 ajax 请求
$.ajax({
url: "/rest/users",
success: function (users) {
var options = [];
$user = $("#append_users");
$.each(users, function (i, user) {
options.push({
'profession': user.prof.Profession,
'gender': user.prof.Gender
});
userArr.push({
'id': user.id,
'firstName': user.prof.FirstName,
'lastName': user.prof.LastName,
'fullName': user.prof.FirstName + ' ' + user.profile.LastName,
'email': user.email,
'avatar': user.prof.Photo,
'profesion': user.prof.Profession
});
$('#filterByProfession').html('');
$('#filterByGender').html(''); // FIRST CLEAR IT
$.each(options, function (k, v) {
if (v.profession !== null) {
$('#filterByProfession').append('<option>' + v.profession + '</option>');
}
if (v.gender !== null) {
$('#filterByGender').append('<option>' + v.gender + '</option>');
}
});
});
});
and now I am trying to filter the users by its data-profesion
, on change of my select option which I populate from the ajax get request , It should show only the users that contain that data-profesion value , something like this现在我试图通过用户的
data-profesion
过滤用户,改变我从 ajax get 请求填充的选择选项,它应该只显示包含该数据专业值的用户,像这样
$('#filterByProfession').change(function () {
var filterVal = $(this).val();
var userProfVal = $(".fc-event").attr("data-profesion");
if (filterVal !== userProfVal) {
}
});
You can use a CSS selector to find those users, and then hide them:您可以使用 CSS 选择器来查找这些用户,然后将其隐藏:
$('#filterByProfession').change(function () {
// first hide ALL users
$('.draggable-user').hide()
// then filter out the ones with the correct profession:
// (you need to escape the used quote)
.filter('[data-profesion="' + $(this).val().replace(/"/g, '\\"') + '"]')
// ... and show those
.show();
});
Try using this尝试使用这个
$(".fc-event[data-profesion='" + filterVal + "']").show();
$(".fc-event[data-profesion!='" + filterVal + "']").hide();
You're trying to get the userProfVal
throughout a className selector which can return more than one element.您正试图在整个 className 选择器中获取
userProfVal
,该选择器可以返回多个元素。
var userProfVal = $(".fc-event").attr("data-profesion");
^
Use the jQuery function .data()
to get data attributes.使用 jQuery 函数
.data()
获取数据属性。
Look at this code snippet using the .each
to loop over all elements returned by this selector .fc-event
:查看使用
.each
循环遍历此选择器.fc-event
返回的所有元素的代码片段:
$('#filterByProfession').change(function() {
var filterVal = $(this).val();
$(".fc-event").hide().each(function() {
if ($(this).data("profesion") === filterVal) {
$(this).show();
}
});
});
$('#filterByProfession').change(function() { var filterVal = $(this).val(); $(".fc-event").hide().each(function() { if ($(this).data("profesion") === filterVal) { $(this).show(); } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id='filterByProfession'> <option>-----</option> <option>Developer</option> <option>Cloud computing</option> </select> <div id="user-append"> <div class="fc-event draggable-user" data-profesion="Developer" id="user_1" style="z-index: 9999;"> <div class="container-fluid"> <input type="hidden" value="1" id="user_1_value" class="userId"> <div class="row" style="justify-content: center;"> <div class="col-xs-3 avatar-col"> <div class="innerAvatarUserLeft"> <img src="'+getUserImage(user.avatar)+'" style="margin: 0 auto;"> </div> </div> <div class="col-xs-9 data-col"> Developer <p class="fullName dataText">Ele</p> <p class="usr_Gender dataText">Male</p> <div style="position: relative"> <li class="availableUnavailable"></li> <li class="usr_profesion dataText">AVAILABLE</li> </div> <p class="user_id" style="float:right;margin: 3px">11</p> </div> </div> </div> </div> </div> <div id="user-append"> <div class="fc-event draggable-user" data-profesion="Cloud computing" id="user_2" style="z-index: 9999;"> <div class="container-fluid"> <input type="hidden" value="2" id="user_2_value" class="userId"> <div class="row" style="justify-content: center;"> <div class="col-xs-3 avatar-col"> <div class="innerAvatarUserLeft"> <img src="'+getUserImage(user.avatar)+'" style="margin: 0 auto;"> </div> </div> <div class="col-xs-9 data-col"> Cloud computing <p class="fullName dataText">Enri</p> <p class="usr_Gender dataText">Male</p> <div style="position: relative"> <li class="availableUnavailable"></li> <li class="usr_profesion dataText">AVAILABLE</li> </div> <p class="user_id" style="float:right;margin: 3px">11</p> </div> </div> </div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.