jQuery selector with a wild card selection of a HTML5 custom data attribute

Question

I'm trying to use a selector to grab an element, then look through the children elements for any that contain a value in a custom data attribute. Then I would perform an action on those children elements with the value, in this example it would turn their background-color to yellow.

For example take the following example of HTML and JS

<div id="RoleUserMaster">
  <div id="RoleUser1">
    <label for="Role1">Role:</label>
    <select name="Role1" class="RoleSelect">
        <option value="1">Role1</option>
        <option value="2">Role2</option>
        <option value="3">Role3</option>
    </select>
    <label for="User1">User:</label>
    <select name="User1" id="selectMe">
        <option value="11" data-roleids="1">Smith</option>
        <option value="12" data-roleids="2 4">John</option>
        <option value="13" data-roleids="1 3">Richard</option>
    </select>
  </div>    
</div>

$('#selectMe').children('[data-roleids=*"1"]').css('background-color','yellow');

I thought this jQuery will first select the element, then it would look at it's children, and try and find any children where custom attribute data-roleids contains a character of '1'. You can also take a look at http://jsfiddle.net/7NAhD/2/ to see it in action.

Cyril N. · Accepted Answer · 2012-01-30 22:38:24Z

1

It works with this :

$(function () {
    $('#selectMe').children('[data-roleids~="1"]').css('background-color','yellow');
});

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

answered Jan 30, 2012 at 22:38

Cyril N.

40.1k40 gold badges165 silver badges268 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery selector with a wild card selection of a HTML5 custom data attribute

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related