根据子图像元素所具有的类的类型，使用JQuery包装和附加可选的html内容

根据子图像元素所具有的类的类型，使用JQuery包装和附加可选的html内容

当图像在WordPress帖子中居中或向左或向右浮动时，核心WordPress文件会将诸如aligncenter、alignleft或alignright之类的类名添加到img标记中。这是因为css可以用来左右浮动图像，或者根据管理员的选择将图像保持在中心位置

我已经选择了包装我的帖子图片，如下所述，以便在我将鼠标悬停在上面时为整个图片提供有趣的翻转效果

alignleft和alignright类随后对图像不做任何处理，因为figure html元素现在优先于图像的样式设置和浮动方式。我想做的是使用JQuery向地物图像添加一个类，具体取决于子元素image上的对齐类

有没有人对我能做些什么来让这个脚本工作有什么建议？下面是结束html代码

    <a href="http://www.jonathanbeech.dev/wp-content/uploads/2014/01/ACF-flexible-content-page.jpg" class="prettyPhoto" rel="prettyPhoto[gallery]">
    <figure class="fignoFloat">
        <div class="overlayArticle">
        <img class="wp-image-509 aligncenter" alt="ACF flexible content page" src="http://www.jonathanbeech.dev/wp-content/uploads/2014/01/ACF-flexible-content-page-420x350.jpg" class="prettyPhoto">
        <span></span>
        </div>
    </figure>
    </a>

我最初使用Jquery将html代码包装并附加到img中，如下所示：

jQuery(function ($) {   
    $(".entry a.prettyPhoto img").wrap('<figure class="fignoFloat"><div class="overlayArticle"></div></figure>');
    $(".overlayArticle").append('<span></span>')
});

jQuery（函数（$）{
美元（“.entry a.to img”）.wrap（“”）；
$（“.overlayArticle”）.append（“”）
});

我尝试了一个条件语句（见下文），但失败了？将alignleft类应用于图像时，不会应用更改后的html：

$(function() {
    if ($(".entry a.prettyPhoto img").hasClass("aligncenter")) {
        $(".entry a.prettyPhoto img").wrap('<figure class="fignoFloat"><div class="overlayArticle"></div></figure>');  
        $(".overlayArticle").append('<span></span>');
    }
    else if ($(".entry a.prettyPhoto img").hasClass("alignleft")) {
        $(".entry a.prettyPhoto img").wrap('<figure><div class="overlayArticle"></div></figure>');
        $(".overlayArticle").append('<span></span>');
    }   
});

$（函数（）{
if（$（“.entry a.pretto img”）.hasClass（“aligncenter”））{
美元（“.entry a.to img”）.wrap（“”）；
$（“.overlayArticle”）。追加（“”）；
}
else if（$（“.entry a.pretto img”）.hasClass（“alignleft”））{
美元（“.entry a.to img”）.wrap（“”）；
$（“.overlayArticle”）。追加（“”）；
}   
});

试试这个：

$(".entry a.prettyPhoto img").each(function() {
    var self = $(this);
    if (self.hasClass("aligncenter")) {
        self.wrap('<figure class="fignoFloat"><div class="overlayArticle"></div></figure>');  
        self.closest('.overlayArticle').append('<span></span>');
    }
    else if (self.hasClass("alignleft")) {
        self.wrap('<figure><div class="overlayArticle"></div></figure>');  
        self.closest('.overlayArticle').append('<span></span>');
    }   

});

---

以aligncenter为目标，包裹它，以alignleft为目标，然后包裹它。最后，将跨度附加到所有PrettyTo假设PrettyTo将始终具有aligncenter或alignleft类

我相信如果任何

$（“.entry a.prettyTo img”）

没有aligncenter类，if语句将返回false，与else if相同，因此基本上不会运行任何if语句。您可以在函数中使用并应用if来解决此问题。对于您的努力，代码似乎仍然不起作用。也许我可以试着把它发布到JSFIDLE上@Huangism@JonathanBeech是的，把它贴在报纸上fiddle@JonathanBeech我更新了我的答案，我忘了你包装了div，所以。家长不能工作。我把它改成了最近的，所以它的目标是正确的元素非常奇怪的@Huangism它似乎在小提琴上工作正常当图像被检查时不确定为什么它在我的网站上失败了？这太棒了，非常感谢@Huangism，我必须记下一个心事来学习更多JQuery

$(".entry a.prettyPhoto img.aligncenter").wrap('<figure class="fignoFloat"><div class="overlayArticle"></div></figure>');
$(".entry a.prettyPhoto img.alignleft").wrap('<figure><div class="overlayArticle"></div></figure>');  

$(".entry a.prettyPhoto .overlayArticle").append('<span></span>');