Jquery div filtering based on click event

Question

Here i'm having a script that which filters the div elements.

HTML

<div class="nav">
<a href="#" data-category-type="4380" data-category-name="jet">4380</a>

<a href="#" data-category-type="4620" data-category-name="air">4620</a>

<a href="#" data-category-type="5000" data-category-name="india">5000</a>

</div>
<div id="Categories">
    <div class="hide" data-category-type="4380" data-category-name="jet">4380.</div>
    <div class="hide" data-category-type="4620" data-category-name="air">4620.</div>
    <div class="hide" data-category-type="5000" data-category-name="india">5000.</div>
    <div class="hide" data-category-type="4380" data-category-name="jet">4380.</div>
</div>

JQUERY

$('.nav a').on('click', function (e) {
    e.preventDefault();
    var cat = $(this).data('categoryType');
    var nam = $(this).data('categoryName');
    $('#Categories > div').hide();
    $('#Categories > div[data-category-type="'+cat+'"]').show();

});

here, i'm checking only one condition (data-category-type),

But here, i want to check the both conditions

data-category-type
data-category-name

How can i achieve this , can anyone help me out please.

EDIT Here i have one more question, how can i show all div elements (if i click on)

<a href="">Show all</a>

Thank you

Arun P Johny · Accepted Answer · 2013-07-12 05:55:33Z

3

You can append one more condition like

$('.nav a').on('click', function (e) {
    e.preventDefault();
    var cat = $(this).data('categoryType');
    var nam = $(this).data('categoryName');
    $('#Categories > div').hide();
    $('#Categories > div[data-category-type="'+cat+'"][data-category-name="'+nam+'"]').show();

});

Demo: Fiddle

Also check

var divs = $('#Categories > div');
$('.nav a').on('click', function (e) {
    e.preventDefault();
    var $this = $(this);
    var cat = $this.data('categoryType');
    var nam = $this.data('categoryName');
    divs.filter(':visible').hide();
    divs.filter('[data-category-type="'+cat+'"][data-category-name="'+nam+'"]').show();
});

Demo: Fiddle

answered Jul 12, 2013 at 5:55

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user123456789 Over a year ago

ya got it but, this <a href="#">Show all</a> will be outside of div.nav then??

Collectives™ on Stack Overflow

Jquery div filtering based on click event

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related