jQuery targeting aria attribute containing value

Question

In an HTML structure of :

<div class="someclass" tabindex="0" aria-describedby="my-specified-action my-one-name">
<div class="someclass" tabindex="1" aria-describedby="my-specified-action my-two-name">
<div class="someclass" tabindex="2" aria-describedby="my-specified-action my-three-name">
<div class="someclass" tabindex="3" aria-describedby="my-specified-action my-four-name">
<div class="someclass" tabindex="3" aria-describedby="my-specified-action my-five-name">

I need to hide all elements that has an attribute aria-describedby containing my value ( for example four ), but leave all others untouched.

jQuery('div[aria-describedby*="four"]').hide()

of course, if I will do :

jQuery('div:not([aria-describedby*="four"])').hide()

it will hide ALL elements ( also the ones containing my target ..)

for some reason, this is not working for me ,..

jQuery('div:not([aria-describedby^="four"])').hide()

what am I doing wrong ??

Answer 1

Your problem is not the attribute selector, it is the target element selector.

You are hiding all div elements whose aria-describedby attribute does not contain four, instead you need to fine tune the selector to target only those element you want. In your case since all the div's share the class someclass use it like

jQuery('div.someclass:not([aria-describedby*="four"])').hide()

Demo: Fiddle