javascript - jQuery hasClass for any other attribute name - Stack Overflow

admin管理员组

文章数量:1330615

hasClass is useful when I want to check if the element has some class. I want to do the same check for some other attribute. For example, I use

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

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

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

Are there any existing beautiful tiny solutions for this?

hasClass is useful when I want to check if the element has some class. I want to do the same check for some other attribute. For example, I use

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

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

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

Are there any existing beautiful tiny solutions for this?

• javascript
• jquery
• html

Share Improve this question Follow edited Mar 11, 2012 at 18:18 Sergei Basharov asked Mar 11, 2012 at 18:11 Sergei BasharovSergei Basharov 54k7878 gold badges207207 silver badges352352 bronze badges 3

• 1 This seems like an extremely bad way to implement User Access Control. – tereško Commented Mar 11, 2012 at 18:34
• Actually it is just an example to better understand my needs. I am not going to use it for user access control =). – Sergei Basharov Commented Mar 11, 2012 at 18:58
• In that case , i suspect that you are solving the problem from the wrong end. Using event delegation and checking attribute of target would be much better way for doing it. – tereško Commented Mar 11, 2012 at 19:31

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

There is no need to explode strings or use indexOf. jQuery has a plete set of css-selectors build in and so you can use attribute-selectors.

you can bine .is() and attribute-selectors:

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

http://api.jquery./category/selectors/

http://api.jquery./attribute-contains-word-selector/

It's pretty straightforward:

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

You can make a jquery helper out of it.

I think you're looking for 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 take advantage of CSS Selector:

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

Or if you prefer have the element not mixed with the condition:

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

Of course you can build a function on top of it that makes it more readable for you.

I would try to use some native javascript before falling back on a 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>

Where it's implemented you can use the dataset attribute on the 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>

additionally you can use some really powerful selecting 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 almost 90% of people online according to caniuse. http://caniuse./queryselector

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

本文标签： javascriptjQuery hasClass for any other attribute nameStack Overflow