如何检查某个元素是否具有属性“名称"?从某种东西开始，而不是以“价值"开始 [英] How to check if some element has attribute "name" starts with something, not "value"

问题描述

我将使用各种以"data-mo-"开头的数据属性名称.

I'm going to use various data attributes names start with for example "data-mo-".

假设我有以下这些元素:

Assume I have these elements:

<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>

我知道如何使用某些值处理其数据属性值开始的元素，但是如何为数据属性 names 进行处理?

I know how to handle elements whose data attribute values start with some value, but how can it be done for the data attribute names?

推荐答案

如果您要做的只是查找给定节点是否具有以特定字符串开头的属性，则可以采用以下方法:

If all you wish to do is find whether a given node has an attribute beginning with a specific string, then one approach is the following:

// 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>

JS小提琴演示.

在上述所有元素中，都有一个以data-mo开头的属性，为了更具体地显示其工作原理，请尝试:

In the above all elements have an attribute starting with data-mo, to show it working more specifically, try:

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>

JS小提琴演示.

这应该仅匹配具有以字符串data-mo-b开头的属性的元素，并且仅样式化第二个<span>元素.

This should match only the element which has an attribute starting with the string data-mo-b, styling only the second <span> element.

参考文献:

• Array.from() .
• Array.prototype.filter() .
• Array.prototype.forEach() .
• document.querySelectorAll() .
• Element.attributes .
• Element.classList API .
>
• Node.nodeName .
• String.prototype.indexOf() .

• Array.from().
• Array.prototype.filter().
• Array.prototype.forEach().
• document.querySelectorAll().
• Element.attributes.
• Element.classList API.
• Node.nodeName.
• String.prototype.indexOf().

这篇关于如何检查某个元素是否具有属性“名称"?从某种东西开始，而不是以“价值"开始的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！