将 rel="lightbox" 添加到其中包含 .jpg 和 .gif 的链接答案

【问题标题】：Add rel="lightbox" to links with .jpg and .gif in them将 rel="lightbox" 添加到其中包含 .jpg 和 .gif 的链接
【发布时间】：2012-07-19 21:39:32
【问题描述】：

我正在尝试制作一个简单的脚本，将 rel="lightbox" 添加到 href 中带有 .jpg 或 .gif 的链接中。有人能帮我吗？我看不到错误。谢谢。

<script type="text/javascript">

       $('a[href*=".jpg"]').each(function() {
          $('a[href*=".gif"]').each(function() {
              $(this).attr('rel','lightbox'); 
          });
       });

</script>

【问题讨论】：

您先过滤了 .JPG，然后为每个 .JPG 图片的所有 .GIF 添加了lightbox 属性。

标签： javascript jquery attributes add

【解决方案1】：

您正在定位具有包含“.jpg”和“.gif”的 href 属性的链接。尝试使用以“.jpg”或“.gif”结尾的 href 属性定位链接：

<script type="text/javascript">
       $('a[href$=".jpg"], a[href$=".gif"]').each(function() {
          $(this).attr('rel','lightbox'); 
       });
</script>

更新要在 DOM 就绪时运行脚本，请将函数附加到 domready 事件：

<script type="text/javascript">
$(document).ready(function() {
       $('a[href$=".jpg"], a[href$=".gif"]').each(function() {
          $(this).attr('rel','lightbox'); 
       });
});
</script>

【讨论】：

我也试过了。当页面加载时，我检查来源并且我的 a 标签中没有 rel="lightbox" 属性。你知道为什么吗？
源代码跟不上动态 dom 变化 - 最好使用浏览器调试工具检查元素。
如果您只是从浏览器查看源代码，您会看到在应用任何脚本之前下载的代码。使用像 firebug 这样的开发者控制台来检查 DOM 的当前状态。
它似乎工作得很好：jsfiddle.net/SO_AMK/pD53R 但是，请确保你在 onLoad 函数中有它
我正在使用 mozilla 开发人员工具，但我仍然看不到任何变化。我也加载了 jquery。