jQuery选择器与通配符选择的HTML5自定义数据属性

Question

我试图使用选择器来抓取一个元素，然后查看任何包含自定义数据属性中的值的子元素。然后，我会对这些具有该值的子元素执行操作，在此示例中，它会将其背景颜色变为黄色。

例如采取HTML和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'); 

我觉得这个jQuery的下面的例子将首先选择元素，那就看它的孩子，并尝试并找到自定义属性数据 - 任何儿童roleids包含一个'1'的字符。您也可以查看http://jsfiddle.net/7NAhD/2/以查看它的实际运行情况。

Answer 1

它的工作原理与此：

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

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