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
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"]') ) { ..
source to share
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"
source to share
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.
source to share
I would try using some native javascript before going back to the library.
<div id='strawberry-plant' data-fruit='12'></div>
<script>
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
</script>
In this case you can use dataset attribute on serialized DOM object
<div id='sunflower' data-leaves='47' data-plant-height='2.4m'></div>
<script>
// '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
</script>
Also, you can use some really powerful selections with querySelectorAll like this
<script>
// Select all elements with a 'data-flowering' attribute
document.querySelectorAll('[data-flowering]');
// Select all elements with red leaves
document.querySelectorAll('[data-foliage-colour="red"]');
</script>
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
source to share