查找包含部分属性的元素

Question

我很难找到可以匹配以下内容的选择器：

$("input[data-rule-*]");

所以，如果我有 data-rule-required 或 data-rule-email，这两个属性都需要匹配。（仅示例，我有一堆后缀，不能指定所有后缀）。

我只找到 $("#element[attribute=value]") 个选择器，不满足我的条件。

我看了这个题目：how do I find elements that contain a data-* attribute matching a prefix using jquery。问题是一样的，但我想知道是否有更紧凑的解决方案。

HTML 例子。假设我可以有更多具有不同 data-rule-something 属性的输入：

<div>
    <label for="field1" class="control-label">Field 1</label>
    <input maxlength="4" data-inputmask="'mask':'9999'" data-rule-required="true" id="field1" type="text" class="form-control" placeholder="0123"></input>
</div>
<div>
    <label for="field2" class="control-label">Conta Corrente</label>
    <input maxlength="14" data-rule-range="5,10" data-inputmask-regex="[0-9]{14}" id="field2" type="text" class="form-control" placeholder="0123456"></input>
</div>
<div>
    <label for="field3"></label>
    <input maxlength="2" data-rule-email="true" data-inputmask-regex="[a-zA-Z0-9]{2}" id="field3" type="text" class="form-control text-uppercase" placeholder="00"></input>
</div>

Answer 1

您的选择是向元素添加另一个属性或标识符，以便您可以 select 所有元素，或者在查询中包含所有属性组合 select 或。

下面的示例向两个 input 元素添加了一个额外的 data-object 单例，然后查询该属性以更新字段值。

var dataObjects = document.querySelectorAll("[data-object]");
for(var i = 0, len = dataObjects.length; i < len; i++){
  dataObjects[i].value = i;
}

<input type="text" data-rule-required data-object />
<input type="text" data-rule-email data-object />

Answer 2

一种不太优雅的方法，但它似乎有效：

$("input").filter(function() {

   if(Object.keys($(this).data()).toString().indexOf('rule')!==-1) {

    return $(this);
   }
}).css('background-color','red');

演示：http://jsfiddle.net/8x05bh2v/

查找包含部分属性的元素

Find elements which contains part of an attribute

javascript

jquery

jquery-selectors