jQuery .each() 通配符 - 选择类以特定字符串开头的所有元素

Question

我正在为不同的divs（jQuery 和 jQuery UI）制作动画，所以我创建了 slidein、fadein 等类，我可以将它们应用到我需要动画的任何地方。在我的 Javascript 文件中，运行 .each() 循环以查找每个具有 fadein 或 sidein 类的元素

我想要做的是能够通过添加fadein-x 的类来选择动画需要多长时间，其中x 是它所花费的毫秒数。例如：

.fadein-500 - 元素需要 500 毫秒才能淡入

.slidein-1000 - 元素滑入需要1000 毫秒

使用.each() 函数，我可以遍历具有特定类的元素，但是我可以使用以特定字符串开头的类（如通配符）遍历所有元素吗？也许是这样的（* 是通配符）：

$('.fadein-*').each(...)

上面将选择所有具有fadein- 类的元素，然后我可以对类进行切片以获取时间，并应用动画。

所以，总而言之，这就是我想要的：

能够以可自定义的时间为元素设置动画，而无需更改 Javascript 文件

如果有其他方法可以做我想做的事，请告诉我！谢谢

注意：我需要这个的原因是因为我正在创建一个 Wordpress 主题，并且我将使用 PHP 来回显用户输入的时间。显然我不想创建 3000每次可能以毫秒为单位的不同类

另外，this question 不一样，OP 询问的是不同的东西

Answer 1

这应该选择类以fade-in 开始的位置

$("[class^='fadein-']").each(...)

我认为没有办法使用类选择器来实现，因此必须以属性开头并使用类属性。正如 cmets 中所指出的，这只有在第一个类是 fadein- 才能在它之前与另一个类一起工作时才有效，那么您将不得不使用包含，如另一个答案所示。

$("[class*='fadein-']").each(...)

Answer 2

我建议使用数据属性：

$('.fadein').each(function() {
  var duration = $(this).data('duration') ? $(this).data('duration') : 500; // a sane default
  $(this).fadeIn(duration);
});

<p class="fadein" data-duration="1500">1500 ms!</p>