jQuery .each() over .wp-caption

jQuery .each() over .wp-caption

本文关键字：over wp-caption each jQuery      更新时间：2023-09-26

WordPress添加一个额外的10px的.wp-caption容器时，一个标题在当前。我试图使用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 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(); 
    });
});

工作!div =)

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的宽度。

EDIT:更新为在.ready()处理程序中使用通用的$引用

相关文章：