Question

当wordpress将图像添加到帖子时，它会将其包装在锚标记中。像这样：

<a href="link"><img src="image" /></a>

我想用div包装锚点并在图像后添加叠加跨度。像这样：

<div class="imagewrap">
   <a href="">
     <img src="image" />
     <span class="overlay"></span>
   </a>
</div>

以下代码就是这样做的。

$('#post a').has('img').wrap('<div class="imagewrap" />').find('img').after('<div class="overlay"></div>');

但是，当您将链接图像添加到wordpress帖子时，它不会将图像包装在锚标记中，因此不起作用。如果没有锚标记，则应该换行图像标记。像这样：

<div class="imagewrap">
     <img src="image" />
     <span class="overlay"></span>
</div>

当然可以定位img标签，但如果是这样，img标签具有锚父级的实例，锚不会被div包装。知道怎么包装锚如果它里面有一个img，如果它没有它应该只包装img标签？

提前致谢。

Answer 1

这很难看，但它应该作为你的第二个选择器：

$('img:not(a img)');

Answer 2

这样的事情应该有效：

$('#post img').each(function() {
    if ($(this).parent().is('a')) {
        $(this).parent('a')
               .wrap('<div class="imagewrap" />');
    }else{
        $(this).wrap('<div class="imagewrap" />');
    }
    $(this).after('<div class="overlay"></div>');
});

迭代所有图像，并包装父<a>元素（如果有），否则它包装图像元素，并在两个实例中的<img>标记之后添加叠加。

或者如果您希望将其包装在一个语句中：

$('#post img').map(function() {
        return $(this).parent('a').length?$(this).parent('a'):$(this);
    }).wrap('<div class="imagewrap" />').end()
      .after('<div class="overlay"></div>')

使用<div>换取<img/>，但如果<img/>有父，且<a>, wrap anchor instead</a> </div>

2 个答案: