[英]How to check if some element has attribute “name” starts with something, not “value”
我将使用以"data-mo-"
开头的各种数据属性名称。
假设我有这些元素:
<span data-mo-top-fade-duration="600">Title 1</span>
<span data-mo-bottom-fade-duration="600">Title 2</span>
<span data-mo-right-fade-duration="600">Title 3</span>
<span data-mo-left-fade-duration="600">Title 4</span>
我知道如何处理数据属性值以某个值开头的元素,但是如何处理数据属性名称呢?
如果您只想查找给定节点是否具有以特定字符串开头的属性,那么一种方法如下:
// node: a single HTMLELement node,
// attr: the string to test against the attribute names:
function hasAttributeStartingWith(node, attr) {
// here we return the result, using Array.from() to turn
// the node-map of attributes into an Array, and then
// Array.prototype.filter() to remove any attributes that
// do not return a true/truthy result against the supplied
// assessment:
return Array.from(node.attributes).filter(function(attributeNode) {
// attributeNode: a reference to the current attribute-node
// of the array of attribute-nodes over which we're iterating.
// here we test to see if the nodeName (the attribute-name)
// of the attribute-node begins with the supplied string
// (held in the 'attr' variable):
return attributeNode.nodeName.indexOf(attr) === 0;
// if the filtered array is greater than zero then
// there are some attributes beginning with the
// supplied string:
}).length > 0;
}
// here we convert the nodeList returned from document.querySelectorAll()
// into an Array, using Array.from(), and iterate over those elements
// using Array.prototype.forEach():
Array.from(document.querySelectorAll('span')).forEach(function(span) {
// 'span': a reference to the current <span> element of the
// array of <span> elements over which we're iterating.
// using the function within the 'if' assessment, since it
// returns a Boolean true/false:
if (hasAttributeStartingWith(span, 'data-mo')) {
// using the Element.classList API to add
// the 'hasAttributeStartingWith' class to
// the current <span> if the function returns
// true:
span.classList.add('hasAttributeStartingWith');
}
});
function hasAttributeStartingWith(node, attr) { return Array.from(node.attributes).filter(function(attributeNode) { return attributeNode.nodeName.indexOf(attr) === 0; }).length > 0; } Array.from(document.querySelectorAll('span')).forEach(function(span) { if (hasAttributeStartingWith(span, 'data-mo')) { span.classList.add('hasAttributeStartingWith'); } });
.hasAttributeStartingWith { display: inline-block; font-size: 1.5em; color: limegreen; }
<span data-mo-top-fade-duration="600">Title 1</span> <span data-mo-bottom-fade-duration="600">Title 2</span> <span data-mo-right-fade-duration="600">Title 3</span> <span data-mo-left-fade-duration="600">Title 4</span>
在上面的所有元素都有一个以data-mo
开头的属性,为了更具体地显示它的工作,请尝试:
Array.from(document.querySelectorAll('span')).forEach(function(span) {
if (hasAttributeStartingWith(span, 'data-mo-b')) {
span.classList.add('hasAttributeStartingWith');
}
});
function hasAttributeStartingWith(node, attr) { return Array.from(node.attributes).filter(function(attributeNode) { return attributeNode.nodeName.indexOf(attr) === 0; }).length > 0; } Array.from(document.querySelectorAll('span')).forEach(function(span) { if (hasAttributeStartingWith(span, 'data-mo-b')) { span.classList.add('hasAttributeStartingWith'); } });
.hasAttributeStartingWith { display: inline-block; font-size: 1.5em; color: limegreen; }
<span data-mo-top-fade-duration="600">Title 1</span> <span data-mo-bottom-fade-duration="600">Title 2</span> <span data-mo-right-fade-duration="600">Title 3</span> <span data-mo-left-fade-duration="600">Title 4</span>
这应该仅匹配具有以字符串data-mo-b
开头的属性的元素,仅样式化第二个<span>
元素。
参考资料:
使用 ES6 的一种简洁方法是选择文档中的所有元素,然后根据.some
属性名称是否以您要查找的字符串开头来选择.filter
:
const moElements = [...document.querySelectorAll('*')] .filter(elm => [...elm.attributes].some( ({ name }) => name.startsWith('data-mo-') )); console.log(moElements);
<span data-mo-top-fade-duration="600">Title 1</span> <span data-mo-bottom-fade-duration="600">Title 2</span> <span data-mo-right-fade-duration="600">Title 3</span> <span data-mo-left-fade-duration="600">Title 4</span> <span>somethingElse</span>
或者,如果您想避免使用 spread 构造中间数组,您可以.call
元素/属性集合上的数组方法:
const moElements = Array.prototype.filter.call( document.querySelectorAll('*'), elm => Array.prototype.some.call( elm.attributes, ({ name }) => name.startsWith('data-mo-') ) ); console.log(moElements);
<span data-mo-top-fade-duration="600">Title 1</span> <span data-mo-bottom-fade-duration="600">Title 2</span> <span data-mo-right-fade-duration="600">Title 3</span> <span data-mo-left-fade-duration="600">Title 4</span> <span>somethingElse</span>
如果我做对了,你想检查 data-mo,所以我尝试了一些方法来完成这项工作;
function getData(index){ if(index[0].indexOf("mo") !== -1) return true return false } $.each($("span"), function(i,index){ var objectKey = Object.keys($(this).data()); if(getData(objectKey)){ $(this).addClass("valid") } else { $(this).addClass("not-valid") } })
.valid { color: green } .not-valid { font-weight: bold; color: red; text-decoration: line-through }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span data-mo-top-fade-duration="600">Title 1</span> <span data-mo-bottom-fade-duration="600">Title 2</span> <span data-mo-right-fade-duration="600">Title 3</span> <span data-mo-left-fade-duration="600">Title 4</span> <span data-not-valid-one-left-fade-duration="600">Title 5</span>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.