如何用jQuery/JS通过通配符选择类名前缀元素并批量执行stopVideo？

我熟悉CSS元素选择器，想知道能不能用jQuery通配符写一行代码，替代下面这三行重复操作：

jQuery('.youtube-video-1')[0].contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*');
jQuery('.youtube-video-2')[0].contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*');
jQuery('.youtube-video-3')[0].contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*');

我试过下面两种写法，但没达到预期效果：

jQuery('.youtube-video-\S*')[0].contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*');
jQuery('[class^=youtube-video-]')[0].contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*');

正确实现方式 #

核心问题是你之前的写法只取了匹配到的第一个元素（[0]），所以只会控制第一个视频。要批量处理所有匹配元素，用jQuery的.each()遍历即可，一行代码搞定：

jQuery('[class^="youtube-video-"]').each(function() {
  this.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*');
});

如果你的元素类名不是以youtube-video-开头（比如同时还有其他类名），可以改用包含匹配的属性选择器[class*="youtube-video-"]，适配场景更广泛。

之前写法失效的原因 #

1. .youtube-video-\S*选择器错误：jQuery的类选择器不支持直接嵌入\S*这类正则语法，类选择器只能匹配完整类名，或用属性选择器做前缀/包含匹配。
2. [0]限制了处理范围：哪怕选择器能匹配所有目标元素，[0]只会提取第一个DOM节点，导致后续视频没被执行停止操作。

内容的提问来源于stack exchange，提问作者Line One