Question

My problem seemed easy at first but i got stuck.

I have some containers (divs) in my page with some custom attributes.

<div class="myclass" myattr1="blah" myattr2="text1-text2-text3-text4-"></div>

myattr1 and myattr2 are defined by me.

All divs are visible on page load.

Now, depending on user selection from a list, i want to show only the divs with myattrib1=”blah” and hide the rest.

I tried the following code, with no success at all

$('#mySelectID').change(function() 
{
var startName = $(this).val();

$(".myclass").not('[myattrib1!="+startName+"]').toggle();

});

The same approach will be used to filter results by attrib2, but there i will use myattrib2|=”+startName+” ( i think this is correct – thats why i have the extra – on the end of myattr2=”text1-text2-text3-text4-“).

Can anyone advice me on how to properly achieve this kind of filtering?
thank you!

Answer 1

You are close, but as you can see form the syntax highlighting, your are not performing string concatenation. +startName+ will be taken literally. Fix the quotes and your fine:

.not('[myattrib1!="' + startName + '"]')

Note that you should be using data-* attributes instead of custom ones.