Question

当有一个标题时，WordPress会向.wp-caption容器添加额外的10px。我正在尝试使用jQuery删除额外的10px。由于this question中的答案，我已经能够做到这一点，但我意识到b / c在帖子中有时会有多个图像，我需要使用.each()的效果重复。下面的代码适用于第一个图像，但后来错误地将第一个图像应用于第二个图像的容器。如何更正.each()才能正常工作？

jQuery().ready(function() {
    jQuery(".wp-caption").each(function(n) {
    var width = jQuery(".wp-caption img").width();
    jQuery(".wp-caption").width(width);
    });
    });

示例w / javascript on

示例w / javascript off

更新：以下最精简的解决方案：

jQuery().ready(function( $ ) {
    $(".wp-caption").width(function() {
        return $('img', this).width();  
    });
});

或用$替换jQuery以防止冲突：

jQuery().ready(function( jQuery ) {
    jQuery(".wp-caption").width(function() {
        return jQuery('img', this).width(); 
    });
});

两者都有效！ =）

Answer 1

this是对.each()。

中当前元素的引用

jQuery().ready(function( $ ) {
    $(".wp-caption").each(function(n) {
        var width = $(this).find("img").width();
        $(this).width(width);
    });
});

...所以从this开始，您使用find()^[docs]方法获取后代<img>及其width()。

你也可以直接将一个函数传递给width()，它会为你迭代。

jQuery().ready(function( $ ) {
    $(".wp-caption").width(function(i,val) {
        return $(this).find("img").width();
    });
});

...这里，函数的返回值将是设置为当前.wp-caption的宽度。

编辑：已更新，以便在$处理程序中使用公共.ready()引用。

jQuery .each（）over .wp-caption

1 个答案: