javascript - 使用 JQuery 计算 html 中具有相似前缀的数据属性

Question

最接近我的问题的答案是以下两个。

jquery-count-similar-data-fields-class-name-in-html-form

jquery-count-elements-with-attribute

我想计算具有相似前缀的数据属性的总数。这是我想要实现的示例。

<input type="date" data-input-type="date" />

<input type="email" data-input-max-length="60" data-input-min-length="8" data-input-type="email" />

<input type="text" data-input-max-length="60" data-input-min-length="8" data-input-url="report" data-input-table="sale" />

我想用数据输入计算所有属性。我知道我可以分别计算每个属性，但我不知道每个页面中出现哪些属性，但我确信每个页面都有数据输入属性。例如，我可以分别计算每个属性

$('[data-input-url]').length

但是这种方法会让我为了一个目的写 100 行

我要查找的是整个文档中以数据输入作为前缀的数据属性的总数，因为我希望在计数大于某个数字时启动一个函数，如果每个计数小于某个数字，则启动另一个函数页。我试过

$('[data-input-*]').length;
$('[data-input*]').length;

但他们都没有工作。有人可以帮忙吗？

标签： javascripthtmljquery

Answer 1

使用 XPath

var attrCount = document.evaluate("count(//@*[starts-with(name(), 'data-input-')])", document)

console.log(attrCount.numberValue)

<input type="date" data-input-type="date" />

<input type="email" data-input-max-length="60" data-input-min-length="8" data-input-type="email" />

<input type="text" data-input-max-length="60" data-input-min-length="8" data-input-url="report" data-input-table="sale" />

使用filter()和attributes属性

var attrCount = 0

$(':input').each(function() { // use * if not :input specific
  attrCount += Array.from(this.attributes).filter(a => a.nodeName.startsWith('data-input-')).length
})

console.log(attrCount)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="date" data-input-type="date" />

<input type="email" data-input-max-length="60" data-input-min-length="8" data-input-type="email" />

<input type="text" data-input-max-length="60" data-input-min-length="8" data-input-url="report" data-input-table="sale" />