使用jQuery替换匹配锚点链接为对应iframe时重复问题求助

你的问题出在循环里的替换逻辑：每次遍历到一个匹配的链接时，你都用全局选择器把所有符合规则的a标签替换成当前生成的iframe，所以最后所有位置都会变成最后一个视频的嵌入内容。

修正后的代码 #

$('a[href*="https://app.application.io/recordings/"]').each(function(index, item) {
  var applicationEmbed = $(this).attr("href");
  var applicationiFrame = '<div class="video-embed" style="position: relative; padding-bottom: 50.5%; height: 0;"><iframe src="' + applicationEmbed + '/embed" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>';
  // 只替换当前遍历到的这个a标签，而不是所有匹配的标签
  $(this).replaceWith(applicationiFrame);
});

关键修改点 #

• 把全局替换的$("a[href*='https://app.application.io/recordings/']")改成$(this)（或者$(item)，两者效果一致），这样每次只会替换当前循环到的那个链接，每个视频的iframe都会对应到原来的位置。

内容的提问来源于stack exchange，提问作者pathetic.aesthetic