在 IE9 中使用 jQuery 定位 `source` 元素答案

【问题标题】：Target `source` elements with jQuery in IE9在 IE9 中使用 jQuery 定位 `source` 元素
【发布时间】：2020-03-09 07:16:27
【问题描述】：

我有以下 JavaScript (jQuery) 和 HTML 结构：

$(function(){
  
  $('source').each(function(){
    console.log('a source element');
  });
  
});

<div class="container">
  <picture>
    <source media="(min-width: 1200px)" srcset="https://via.placeholder.com/300">
    <source media="(min-width: 800px)" srcset="https://via.placeholder.com/150">
    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">
  </picture>
</div>

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

我意识到 IE9 不支持 picture，所以我正在研究一些自定义后备逻辑。此回退的一部分涉及从source 标签中获取srcset 属性。但是，jQuery 似乎无法在 IE9 中选择源元素，因为在运行上面的示例代码时，没有任何内容记录到该浏览器的控制台中。有没有人能建议如何让 jQuery 识别 IE9 中的源元素（或者是否有可能）？

谢谢

-- 编辑

可以选择picture 元素，但再次选择$('picture').children() 不起作用。 source 元素被完全忽略。还尝试将类添加到 source 元素，但在将它们用作选择器时仍然没有返回任何内容。

【问题讨论】：

标签： jquery html internet-explorer-9

【解决方案1】：

我能够在我这边提出问题。使用F12开发者工具调试JavaScript代码后，在IE9模式下，似乎可以找到图片元素，但查看其innerHTML属性，发现只包含img标签，不包含源元素，所以我们找不到它。我将尝试提交有关此问题的反馈。

众所周知，HTML element 为 picture>、audio> 元素或 video> 元素。我已经测试如果我们将图片更改为音频或视频元素，那么我们可以找到源元素。因此，您可以尝试使用它们，而不是使用图片元素。

【讨论】：