如何用jQuery选中首个div内的img标签并修改其src属性

问题背景 #

页面存在两个结构完全一致的div模块：

• 第一个div id为dvEA
• 第二个div id为dvEA1
  两个div内部均按「a标签 > class为SI的div > src初始为空的img标签」的结构嵌套，需求为仅修改第一个div内img的src属性，不影响第二个模块的元素。
  对应DOM结构如下：

<div id="dvEA"> 
<a href="">
   <div class="SI" style="margin: 20px;">
   <img src="">
</div>
</a>        
</div>
<div id="dvEA1"> 
<a href="">
   <div class="SI" style="margin: 20px;">
   <img src="">
</div>
</a>        
</div>

原有代码错误原因 #

原有错误代码：

$("img",".SI","a", "#dvEA").attr('src', 'https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Flag_of_Pakistan.svg/250px-Flag_of_Pakistan.svg.png');

错误点：jQuery的上下文选择器仅支持$(目标选择器, 查找范围)双参数格式，传入4个独立字符串参数时，引擎无法识别#dvEA → a → .SI → img的嵌套层级，会出现匹配范围错乱，无法精准定位目标。

正确实现方案 #

方案1：后代选择器写法（最直观推荐） #

将嵌套层级直接写在同一个选择器字符串中，用空格分隔后代元素，匹配逻辑完全贴合DOM结构：

$("#dvEA a .SI img").attr('src', 'https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Flag_of_Pakistan.svg/250px-Flag_of_Pakistan.svg.png');

方案2：上下文范围写法 #

将父容器作为第二个参数传入，限定查找范围仅在#dvEA内部：

$("a .SI img", "#dvEA").attr('src', 'https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Flag_of_Pakistan.svg/250px-Flag_of_Pakistan.svg.png');

简化提示：由于id为dvEA的容器内部仅有一个img标签，结构稳定的前提下可以直接简化为$("#dvEA img")，执行效果完全一致。

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