Find all elements with data-attr with jquery

Question

Objective:

Find all elements with the data-attribute parent-cat-number == my_cat_number.

As you can see from the markup I get the parent-category integer from the atribute "data-cat-number", but I fail at finding all the children with that as their parent-cat-number.

Here's an example of how it could look http://jsfiddle.net/jahrichie/jGpcx/ , but right now the click of a parent shows all children. I'd like to adapt it to only show the children of that element.

JS http://jsfiddle.net/jahrichie/jGpcx/

 $('.parent-category').click(function () { var my_cat_number = $(this).attr('data-cat-number'); $(this).children().find("[parent-cat-number] = my_cat_number").show(); })

HTML

<div class="category-faceted"> <div class="parent-category" data-cat-number="1"> <a href="javascript:void(0)">Celebrity</a> <div class="child-category" parent-cat-number="1"> <a href="javascript:void(0)">Sub-Celebrity</a> </div> </div> <div class="parent-category" data-cat-number="2"> <a href="javascript:void(0)">Entertainment</a> <div class="child-category" parent-cat-number="2"> <a href="javascript:void(0)">Sub-Ent</a> </div> </div> </div>

Rohit Agrawal · Accepted Answer · 2013-05-30 16:28:36Z

you can use this DEMO FIDDLE

$('.parent-category').on('click', function () { var my_cat_number = $(this).data('cat-number'); $(this).find('*').each(function() { if($(this).attr('parent-cat-number') == my_cat_number) $(this).show(); }); });

Gabe · Accepted Answer · 2013-05-30 16:12:16Z

0

How about:

$(this).children().find("[parent-cat-number] = '" + my_cat_number + "'").show();

answered May 30, 2013 at 16:12

Gabe

50.6k29 gold badges147 silver badges182 bronze badges

Comments

adeneo · Accepted Answer · 2013-05-30 16:14:33Z

$('.parent-category').on('click', function () { var my_cat_number = $(this).data('cat-number'); $('*', this).filter(function() { return $(this).attr('parent-cat-number') == my_cat_number; }).show(); });

FIDDLE

techfoobar · Accepted Answer · 2013-05-30 16:15:02Z

You can do it as:

$('.parent-category a').click(function() { $(this).parent() .find('[parent-cat-number="'+$(this).parent().data('cat-number')+'"]') .show(); return false; });

Working Demo

Collectives™ on Stack Overflow

Find all elements with data-attr with jquery

4 Answers 4

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Related