javascript - 查找包含部分属性的元素

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

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

下面的示例向两个 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 />