JQuery hasClass for any other attribute name

hasClass is useful when I want to check if an element has a class of some kind. I want to do the same validation for a different attribute. For example, I am using

<div id="nav" data-available-for="users administrators guests"></div>


and want to check if this div is available to users. So, I would do it like

$('#nav').hasAttributeValue('data-available-for', 'users')


Are there beautiful tiny solutions out there for this?


source to share

5 answers

No need to explode lines or use indexOf. jQuery has a full set of css selectors built in, so you can use an attribute selector.

you can combine .is()

and attribute selectors:

if( $('#nav').is('[data-available-for~="users"]') ) { ..






It's pretty simple:

$('#nav').attr('data-available-for').indexOf('users') != -1


You can make a jQuery helper out of it.



I think what you are looking for is attr


if ($('#nav').attr('data-available-for').split(' ').indexOf('users') != -1) {
  // do stuff


Similarly, you can set attributes by passing a new value for the attribute as the second argument:

$('#nav').attr('data-available-for', 'users'); // data-available-for="users"




You can use CSS Selector:

if ($("#nav[data-available-for~=user]").length) {
    // is available for 'user'


Or, if you prefer that the element does not mix with the condition:

if ($("#nav").filter("[data-available-for~=user]").length) {
    // is available for 'user'


Of course, you can create a function on top of it, which makes it more readable to you.



I would try using some native javascript before going back to the library.

<div id='strawberry-plant' data-fruit='12'></div>

var plant = document.getElementById('strawberry-plant');

//'Getting' data-attributes using getAttribute
var fruitCount = plant.getAttribute('data-fruit'); // fruitCount = '12'

// 'Setting' data-attributes using setAttribute
plant.setAttribute('data-fruit','7'); // Pesky birds


In this case you can use dataset attribute on serialized DOM object

<div id='sunflower' data-leaves='47' data-plant-height='2.4m'></div>

// 'Getting' data-attributes using dataset 
var plant = document.getElementById('sunflower');
var leaves = plant.dataset.leaves; // leaves = 47;

// 'Setting' data-attributes using dataset
var tallness = plant.dataset.plantHeight; // 'plant-height' -> 'plantHeight'
plant.dataset.plantHeight = '3.6m';  // Cracking fertiliser


Also, you can use some really powerful selections with querySelectorAll like this

// Select all elements with a 'data-flowering' attribute

// Select all elements with red leaves


querySelectorAll () is supported by nearly 90% of the internet users according to caniuse.com http://caniuse.com/queryselector

and this is just the beginning. check out the full power of css3 query selectors here: http://www.w3.org/TR/selectors/#selectors



All Articles