Filter Data Attributes jQuery

Question

I am trying to filter my List Items dependant on what data attributes they have. Please see my code below:

HTML

<li data-process="test 1 ; test 2 ; test 3;">Item</li>
<li data-process="test 2 ; test 3;">Item</li>
<li data-process="test 1 ; test 2 ; test 3;">Item</li>
<li data-process="test 2 ; test 3;">Item</li>
<li data-process="test 1 ; test 2 ; test 3;">Item</li>

JS

$('[data-process="test1"]').hide();

So then I would like all items with test 1 to hide.

Thanks in advance!

Samuel Caillerie · Accepted Answer · 2014-11-19 15:14:33Z

5

Use the contains selector :

$('li[data-process*="test 1"]').hide();

See this fiddle : http://jsfiddle.net/zfdLvndy/1/

But keep in mind that this can be costful to retrieve elements like that...

answered Nov 19, 2014 at 15:14

Samuel Caillerie

8,2652 gold badges29 silver badges34 bronze badges

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

5 Comments

Bill Criswell Over a year ago

This is the answer I think OP is looking for, but I'd suggest OP stores an array in those data attributes to make it easier to work with if you need to manipulate it a lot.

Samuel Caillerie Over a year ago

@BillCriswell : I agree with you :-)

six fingered man Over a year ago

This is good, but he should be aware that this would match something like test12. If the semicolons were more consistent as terminators, that would be useful, but the last one in the list lacks a space. :(

user3122188 Over a year ago

Thank you very much @SamuelCaillerie That has worked perfectly! And sixfingeredman apologies they are consistent in my code - c&p error. Many thanks again!

Bill Criswell Over a year ago

Here is a demo using an array. This way you could filter more than one without insane string concatenation: jsbin.com/wunifewunu/3/edit?html,js,output

Collectives™ on Stack Overflow

Filter Data Attributes jQuery

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related