jQuery .each() 通配符 - Select 所有具有 class 且以特定字符串开头的元素

Question

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

的元素

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

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

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

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

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

上面的 select 所有带有 fadein- class 的元素，然后我可以切片 class 来获取时间，并应用动画。

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

无需更改 Javascript 文件

即可使用可自定义的时间为元素设置动画

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

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

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

Answer 1

这应该 select 其中 class 以 fade-in

开头

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

我认为没有办法用 class select 来做到这一点，或者必须做属性开头并使用 class 属性。正如评论中指出的那样，这只有在第一个 class 是 fadein- 才能与另一个 class 一起工作时才有效，然后你将不得不使用包含，如另一个答案所示。

$("[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>

jQuery .each() 通配符 - Select 所有具有 class 且以特定字符串开头的元素

jQuery .each() wildcard - Select all elements with class starting with specific string

html

jquery

animation

css-selectors

jquery-selectors