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-roleid包含字符“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/

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

1 个答案: