具有 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-单词选择器/