jQuery .each() 超过 .wp-caption

Question

当标题存在时，WordPress 会向 .wp-caption 容器添加额外的 10px。我正在尝试使用 jQuery 删除多余的 10px。感谢 这个问题，但我意识到b/c有时一篇文章中有多个图像，我需要使用一些达到 .each() 效果的东西来迭代。下面的代码适用于第一个图像，但随后错误地将第一个图像的 with 应用于第二个图像的容器。如何纠正 .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/ < a href="http://dev.airve.com/blogx/2011/07/test-wp-caption-no-js/" rel="nofollow noreferrer">javascript 关闭

更新：下面最简化的解决方案：

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] 方法获取后代 及其 width()。

您还可以直接将函数传递给 width()，它会为您进行迭代。

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

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

---

编辑：更新为在 .ready() 处理程序中使用通用 $ 引用。