Filter by checkbox show/hide div link jquery

Question

I have my jquery checkbox filter that works by showing/hiding the div, when I added an <a href="#"></a> the checkbox no longer shows/hides the div

2 of the div's are links to demonstrate, the other 2 purposefully not links to show they work.

Question is what needs to be added to the jquery to enable the checkbox to act on the div's when they are inside <a href>

I tried var selectedDivs = $('#Categories > .linkkk > div').hide(); but this didn't seem to work

https://jsfiddle.net/f7srx0dd/22/

<input type="checkbox" class="checkbox" name="High" data-category-type="high">High
<input type="checkbox" class="checkbox" name="low" data-category-type="low" > Low
 <input type="checkbox" class="checkbox" name="low" data-category-name="bread" > bread



</div>

<div id="Categories">
    <a href="#" class="linkkk"><div class="hide" data-category-type="high" data-category-name="pizza">high</div></a>
    <a href="#"><div class="hide" data-category-type="low" data-category-name="pasta">low</div></a>
    <div class="hide" data-category-type="low" data-category-name="pizza">low</div>
    <div data-category-type="high" data-category-name="bread">bread</div>
</div>

$('.checkbox ').on('click', function (e) {



var $this = $(this),
    $links = $('.checkbox');

if ($this.hasClass('selected')) {
    $this.removeClass('selected');
} else {
    $this.addClass('selected');
}

 var selectedDivs = $('#Categories > div').hide();
 var anySelectedCheckbox = false;
 $.each($links, function (k, v) {

$this = $(v);

if ($this.hasClass('selected')) {
    anySelectedCheckbox = true;
    var cat = $this.data('categoryType');
    var nam = $this.data('categoryName');
    selectedDivs = selectedDivs.filter('[data-category-type="'+cat+'"],   [data-category-name="'+nam+'"]');
}

});
selectedDivs.show();

if(!anySelectedCheckbox) {
$('#Categories > div').show();

}


});

Answer 1

( Demo )

You're using a css child selector which will not find the div if it is not a direct descendant of #Categories . This...

var selectedDivs = $('#Categories > div').hide();

Should be this...

var selectedDivs = $('#Categories div').hide();

Or, to be more specific, you could use this...

var selectedDivs = $('#Categories > div, #Categories > a').hide();

Or, if you want every direct descendant of #Categories , you can use this...

var selectedDivs = $('#Categories > *').hide();

Or, if you want to specifically hide the div within the anchor, you can use this...

var selectedDivs = $('#Categories > a > div').hide();

Answer 2

When you wrap div with a selector #Categories > div doesn't work anymore, so you can't filter those nodes.

The simplest solution is to fix HTML markup like this:

<div id="Categories"> 
    <div class="hide" data-category-type="high" data-category-name="pizza">
        <a href="#" class="linkkk">high</a>
    </div>
    <div class="hide" data-category-type="low" data-category-name="pasta">
        <a href="#">low</a>
    </div>
    <div class="hide" data-category-type="low" data-category-name="pizza">low</div>
    <div data-category-type="high" data-category-name="bread">bread</div>
</div>

Demo: https://jsfiddle.net/f7srx0dd/23/

If however you still want to wrap div with a then you can do this:

<div id="Categories"> 
    <a href="#" class="linkkk" data-category-type="high" data-category-name="pizza">
        <div class="hide">high</div>
    </a>
    <a href="#" data-category-type="low" data-category-name="pasta">
        <div class="hide">low</div>
    </a>
    <div class="hide" data-category-type="low" data-category-name="pizza">low</div>
    <div data-category-type="high" data-category-name="bread">bread</div>
</div>

and use #Categories > * selector:

Demo: https://jsfiddle.net/f7srx0dd/26/

Answer 3

var selectedDivs = $('#Categories div').hide();

https://jsfiddle.net/f7srx0dd/30/

<input type="checkbox" class="checkbox" name="bread" data-category-name="bread" > bread

<div data-category-type="bread" data-category-name="bread">bread</div>

https://jsfiddle.net/f7srx0dd/31/