jQuery .each () поверх .wp-заголовка - PullRequest
Новая
       2

jQuery .each () поверх .wp-заголовка

2 голосов
/ 17 июля 2011

WordPress добавляет дополнительные 10px к контейнеру .wp-caption, когда присутствует заголовок. Я пытаюсь использовать jQuery, чтобы удалить лишние 10px. Я смог сделать это благодаря ответам в на этот вопрос , но я понял, что в посте иногда есть несколько изображений, мне нужно что-то использовать для эффекта .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 на

Пример с / отключение 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(); 
    });
});

Оба работают! =) * * Тысяча двадцать-семь

1 Ответ

4 голосов
/ 17 июля 2011

this является ссылкой на текущий элемент в .each(). 

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

... поэтому из this вы используете find() [документы] метод для получения потомка <img> и его width().

Вы также можете передать функцию непосредственно в width(), и она будетитерация для вас. 

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

... здесь возвращаемое значение функции будет шириной, установленной на текущий .wp-caption.

РЕДАКТИРОВАТЬ: Обновлено для использования общей ссылки $ внутри обработчика .ready().

...