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/