JQuery filter sections by class
I'm trying to filter div
with my class, but I'm having problems. For some reason, if any button is pressed, everything disappears. I have been looking for this problem for a while and I cannot figure out why this is happening. CodePen is here and my attempt is below:
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>
<br />
<div class="a b">a & b</div>
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
<div class="d">d</div>
CSS
div {
background: #eee;
height: 100px;
width: calc(25% - 10px);
float: left;
margin: 5px;
text-align: center;
}
.active {
color: red;
}
JQuery
$( document ).ready(function() {
$("#all").click(function() {
$("div").fadeIn(500);
$("#all").addClass("active");
$(":not(#all)").removeClass("active");
});
$("#a").click(function() {
$(".a").fadeIn(500);
$(":not(.a)").fadeOut(0);
$("#a").addClass("active");
$(":not(#a)").removeClass("active");
});
$("#b").click(function() {
$(".b").fadeIn(500);
$(":not(.b)").fadeOut(0);
$("#b").addClass("active");
$(":not(#b)").removeClass("active");
});
$("#c").click(function() {
$(".c").fadeIn(500);
$(":not(.c)").fadeOut(0);
$("#c").addClass("active");
$(":not(#c)").removeClass("active");
});
$("#d").click(function() {
$(".d").fadeIn(500);
$(":not(.d)").fadeOut(0);
$("#d").addClass("active");
$(":not(#d)").removeClass("active");
});
});
source to share
This is because of the selector $(":not(.b)")
which selects all elements and hides it except .b
, which will also include the element body
.
You need to use a more specific selector, one of which is to use a container element like
var $btns = $('.btn').click(function() {
if (this.id == 'all') {
$('#ct > div').show();
} else {
var $el = $('.' + this.id).show();
$('#ct > div').not($el).hide();
}
$btns.removeClass('active');
$(this).addClass('active');
})
.active {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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>
<br />
<div id="ct">
<div class="a b">a & b</div>
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
<div class="d">d</div>
</div>
Using a regular selector like the element selector div
might also not work as it might target other unrelated elements, so another option is to use a common class for all elements that need to be targeted.
var $items = $('.item');
var $btns = $('.btn').click(function() {
if (this.id == 'all') {
$items.show();
} else {
var $el = $('.' + this.id).show();
$items.not($el).hide();
}
$btns.removeClass('active');
$(this).addClass('active');
})
.active {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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>
<br />
<div class="item a b">a & b</div>
<div class="item a">a</div>
<div class="item b">b</div>
<div class="item c">c</div>
<div class="item d">d</div>
Note. Also, as you can see, there is no need to write separate click handlers for each button - as long as the button of the id
button and the class you are looking for are the same.
source to share
The problem is with this selector, for example:
:not(.d)
... will select anything that doesn't have a class .d
, including body and all buttons, etc. Limiting it more, for example:
div:not(.d)
... must work. See my fix: http://codepen.io/anon/pen/cyhIK
source to share
sort table content based on class name Maybe this will help someone:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$("table tbody tr").sort(function (a, b){
return $("td", b).attr("class") < $("td", a).attr("class") ? 1 : -1;
}).appendTo('table tbody');
sort table row values based on class name:
<table>
<thead>
<th>A column</th>
</thead>
<tbody>
<tr>
<td class="x">A</td>
</tr>
<tr>
<td class="c">B</td>
</tr>
<tr>
<td class="">C</td>
</tr>
</tbody>
</table>
source to share