0

在通过谷歌进行大量研究并阅读了几篇 stackoverflow 帖子之后，我已经用我的 jsfiddle 修补了几个小时，我已经碰壁了。感谢任何指示或帮助！

首先 Stackoverflow 在这里发帖 - 希望我做对了。我喜欢 S&A，很有帮助！

我对 jQuery 有一些了解，但到目前为止还不足以解决这个问题（显然 ;-()

我正在尝试做什么（和** jsFiddled '）**

  • 在名为“section-content”的 div 中定位所有“img”
  • 分别提取“src”和“alt”
  • 环绕<figure>“imgs”
  • 如果有一个链接（.section-content a img）可以正确显示链接作为 <figure><a href="URL"><img src="IMAGE" alt="alt"/></a></figure>
  • 将类“.section-image”添加到<figure>
  • 去掉所有的废话，比如宽度、高度（大约 500 个帖子，所以干净的代码会很好）
  • 从 img 中去除旧的 CSS 类和样式

基本上要改造：

   <img width="174" height="174" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRJPGfl3z2jsaZckTE4-TuK6bfvbTWk_8QNAStYN4eUWNYbkYeKMA" class="image-style" alt="description"/>

到

   <figure class="section-image"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRJPGfl3z2jsaZckTE4-TuK6bfvbTWk_8QNAStYN4eUWNYbkYeKMA" alt="description"/></figure>

如果有链接：

   <a href="http://www.google.com"><img width="174" height="174" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRJPGfl3z2jsaZckTE4-TuK6bfvbTWk_8QNAStYN4eUWNYbkYeKMA" class="image-style" alt="description"/></a>

到

   <figure class="section-image"><a href="http://www.google.com"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRJPGfl3z2jsaZckTE4-TuK6bfvbTWk_8QNAStYN4eUWNYbkYeKMA" alt="description"/></a></figure>

到目前为止我做了什么： - jsFiddle - http://jsfiddle.net/NGJYy/

我面临的问题： - 适用于非链接图像（没有“a”），但我无法将“.section-image”添加到（中断？！奇怪的是，尝试return $('<figure class="section-image">', { 了它不喜欢的 - 图像不会显示那就不再了。

  • 如果存在一个链接，它只会惨遭失败并环绕 the ，然后再一次将 HREF 返回为未定义。

这有效（感谢您的帮助！）

$('.section-content * > img, .section-content * > a:has(img)').wrap('<figure class="section-image" />'); // will target elements to match your original question
  //$('.section-content > *').wrap('<figure class="section-image" />'); // will target all direct child elements
  //$('.section-content > img').wrap('<figure class="section-image" />'); // all direct IMG child elements
  //$('.section-content img').wrap('<figure class="section-image" />'); // all IMG descendants (including grand-children etc)
  //$('.section-content > img, .section-content > a').wrap('<figure class="section-image" />'); // all direct IMG and A child elements

$('.section-content img').each(function()
       {
       $(this).removeAttr('width');
       $(this).removeAttr('height');
       $(this).removeAttr('style');
       $(this).removeAttr('class');
       });
4

1 回答 1

0

为什么不使用 jQuery 的wrap()方法？

$('.section-content > *').wrap('<figure class="section-image" />');

在剥离特定属性时：

$('.section-content img').each(function()
       {
       $(this).removeAttr('width');
       $(this).removeAttr('height');
       $(this).removeAttr('style');
       });

编辑（根据您的评论）：

  $('.section-content > img, .section-content > a:has(img)') // will target elements to match your original question
  $('.section-content > *') // will target all direct child elements
  $('.section-content > img') // all direct IMG child elements
  $('.section-content img') // all IMG descendants (including grand-children etc)
  $('.section-content > img, .section-content > a') // all direct IMG and A child elements
于 2013-04-07T15:30:30.550 回答