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

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 将首先选择元素，然后它会查看它的子元素，并尝试找到自定义属性 data-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/