JQuery -选择自定义元素的后缀或前缀的tagName

JQuery - Select custom elements by suffix or prefix of their tagName

本文关键字：后缀 前缀 tagName 元素 选择 自定义 JQuery      更新时间：2023-09-26

考虑我用HTML5创建了一些自定义元素

<orange-juice>...</orange-juice>
<apple-juice>...</apple-juice>
<banana-juice>...</banana-juice>

果汁成分有很多种。我想用jQuery的一个指令来选择它们的后缀。

我试过了，但是没有用:

$('$=juice').html('juice'); //the .html instruction is not important

如果我把它们一个一个地拿出来，这个就行了。

$('orange-juice').html('juice'); //this work
$('apple-juice').html('juice'); //this work
$('banana-juice').html('juice'); //this work

但是有许多这样的自定义元素以juice为后缀。如何在一条指令中选择它们?

编辑1 这是肯定的，一个共同的类将工作，但这不是我的代码，有太多的这些元素采取主题一个接一个。但如果没有解决方案，我将做这个(在一个月内)。

您可以尝试.filter(fn)函数，这里有一个前缀

的示例
$('body *').filter(function() {
   return this.tagName.toLowerCase().indexOf('juice') == 0;
}).html('juice');

然而，我建议，你分配一个公共类，然后类选择器(" .class ")可以很容易地使用。

后缀示例，这里我使用了endsWith()方法

jQuery(function($) {
  $('body *').filter(function() {
    return this.tagName.toLowerCase().endsWith('juice');
  }).html('juice');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<orange-juice>...</orange-juice>
<apple-juice>...</apple-juice>
<banana-juice>...</banana-juice>

虽然您已经接受了问题的jQuery解决方案，这是您所要求的，但还值得添加–如果只是为了完成;

// declaring an object to contain the two functions:
let findElementsBy = {
  // retrieving all elements held within the <body> element,
  // we could instead use:
  // document.getElementsByTagName('*')
  // but this is just personal preference:
  'allElems': document.querySelectorAll('body *'),
  // declaring the 'suffix' function:
  // ending: String, a required argument which is 'ending'
  // by which we're filtering the retrieved elements:
  'suffix': function(ending) {
    // here we use Array.from() to convert the Array-like
    // NodeList into an Array:
    return Array.from(this.allElems)
      // we filter that Array using Array.prototype.filter():
      .filter(
        // here we use an Arrow function to keep only those
        // elements ('el', the current Array-element of the
        // Array over which we're iterating) whose lower-case
        // tagName ends with the supplied 'ending' String,
        // determined using String.prototype.endsWith(),
        // which returns a Boolean:
        el => el.tagName.toLowerCase().endsWith(ending)
      // this filtered Array is then passed back to the
      // calling context as an Array, which allows that
      // context to iterate through the returned elements
      // using Array methods.
      );
  },
  'prefix': function(beginning) {
    return Array.from(this.allElems)
      .filter(
        // this function is exactly the same as the above,
        // but here we use String.prototype.startsWith()
        // to find those elements whose lower-cased tagName
        // begins with the supplied String:
        el => el.tagName.toLowerCase().startsWith(beginning)
      );
  }
}
findElementsBy.suffix('juice').forEach(e => e.style.borderColor = 'limegreen');
findElementsBy.prefix('banana').forEach(e => e.style.backgroundColor = '#ffa');


let findElementsBy = {
  'allElems': document.querySelectorAll('body *'),
  'suffix': function(ending) {
    return Array.from(this.allElems)
      .filter(
        el => el.tagName.toLowerCase().endsWith(ending)
      );
  },
  'prefix': function(beginning) {
    return Array.from(this.allElems)
      .filter(
        el => el.tagName.toLowerCase().startsWith(beginning)
      );
  }
}
findElementsBy.suffix('juice').forEach(e => e.style.borderColor = 'limegreen');
findElementsBy.prefix('banana').forEach(e => e.style.backgroundColor = '#ffa');
orange-juice,
apple-juice,
banana-juice {
  display: block;
  border: 1px solid transparent;
  margin: 1em auto 0 auto;
  width: 80%;
}
<orange-juice>...</orange-juice>
<apple-juice>...</apple-juice>
<banana-juice>...</banana-juice>

JS Fiddle demo.

引用:

  • Array.from() .
  • Array.prototype.filter() .
  • Array.prototype.forEach() .
  • 箭头功能。
  • document.getElementsByTagName()
  • document.querySelectorAll() .
  • String.prototype.endsWith() .
  • String.prototype.toLowerCase() .
  • String.prototype.startsWith() .
相关文章：