如何用JavaScript/JQuery获取iframe内前3个<img>并调整宽度？

为什么next()方法无效 #

next()是获取当前元素的下一个同级兄弟元素，如果第一张图片后面的元素不是<img>标签（比如是<p>、<div>或其他元素），这个方法就找不到目标的第二张图片，自然无法生效。

正确的实现方式 #

方式1：通过索引精准选择

利用jQuery的eq()方法，直接指定<img>标签的索引（索引从0开始），选中前3张：

const $iframeImgs = iFrame.contents().find("img");
// 第一张（索引0）
$iframeImgs.eq(0).width(300);
// 第二张（索引1）
$iframeImgs.eq(1).width(300);
// 第三张（索引2）
$iframeImgs.eq(2).width(300);

方式2：批量选中前3张

用slice()方法一次性截取前3个<img>元素，批量设置宽度，代码更简洁：

iFrame.contents().find("img").slice(0, 3).width(300);

重要前提 #

确保你的主页面和iframe页面是同域（协议、域名、端口完全一致），否则浏览器的同源策略会阻止你操作iframe内部的DOM元素，以上代码都无法生效。

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