Функция jQuery height () не работает с элементом

В настоящее время я собираюсь собрать карусель с поддержкой jQuery. Однако я, похоже, столкнулся с небольшой проблемой при установке высоты (или ширины) элемента.

Ниже приведен соответствующий код функции:

carousel = function( container, options )
{
    this.settings = $.extend({

       //General settings:
        width: 600,
        height: 400,
        slides: 'div',
        snapTo: true,
        mouseSupport: true,
        trackMovement: true,
        slideWidth: 600,
        slideHeight: 400,

       //CSS classes:
        wrapperCls: 'carousel_wrapper',
        innerCls: 'carousel_scroll_inner'

    }, options);

    this.container = container;
    this.scroller = null;
    this.slides = this.container.children(this.settings.slides);
    this.numSlides = this.slides.length;
    this.scrollWidth = this.settings.width * this.numSlides;

    this.container.addClass(this.settings.wrapperCls);
    this.scroller = $('<div />').addClass(this.settings.innerCls);
    this.container.wrapInner(this.scroller);

    this.scroller.width(1500)

    this.scroller.css('width', this.scrollWidth);
    this.container.css({ width: this.settings.width, height: this.settings.height });
};

Это, в свою очередь, называется:

$(function() {
    var carousel1 = new carousel($('#myElement'));
});

#myElement definitely exists, and no error is thrown. this.scroller also contains the correct jQuery object which has been wrapped to the contents of this.container. The problem is that I am unable to set the CSS width or height of this.scroller, using either the width(), height() or css() functions.

Что мне не хватает? Я продемонстрировал проблему jsFiddle . Если вы проверите инспектор элементов, вы увидите, что размеры никогда не обновляются для элемента div.carousel_scroll_inner .

3
nl ja de
Я знаю, что могу заставить его работать так, но это не мой вопрос. Я не хочу связывать функцию width() . Нет никакой реальной причины, по которой мой код не работает ...
добавлено автор BenM, источник

1 ответы

Проблема в том, что здесь:

this.container.wrapInner(this.scroller);

jQuery будет использовать копию. Таким образом, this.scroller - это не тот же элемент, который обернут вокруг того, что ниже this.container . Пытаться:

this.container.addClass(this.settings.wrapperCls);
this.scroller = $('<div />').addClass(this.settings.innerCls);
this.scroller.append(this.container.contents());
this.container.append(this.scroller);
3
добавлено
Спасибо. Я не знал, что wrapInner() фактически создал копию оберточного элемента. +1.
добавлено автор BenM, источник
Возможно, еще одна причуда jQuery (или DOM). Еще раз спасибо, что меня повесили все утро!
добавлено автор BenM, источник
Это определенно должно быть зарегистрировано где-то в API!
добавлено автор BenM, источник
@BenM Я тоже;) На самом деле я все еще пытаюсь найти доказательство этого. Также может быть, что это конкретный случай, потому что элемент упаковки еще не привязан к dom. ;)
добавлено автор Yoshi, источник
@BenM Я предполагаю, что это так, посмотрите на источник jQuery и посмотрите var wrap = jQuery (html, this [0] .ownerDocument) .eq (0) .clone (true);
добавлено автор Yoshi, источник
JavaScript Jobs — чат
JavaScript Jobs — чат
8 336 участник(ов)

JavaScript Jobs — чат для поиска работы и людей Правила оформления: https://teletype.in/@telegram-ru/r1WQe5F1m См. также: @mobile_jobs, @devops_jobs, @nodejs_jobs, @react_js, @angular_ru, @js_ru

JavaScript.ru
JavaScript.ru
7 932 участник(ов)

Сообщество сайта JavaScript.ru в Slack.

pro.js
pro.js
4 675 участник(ов)

Про JavaScript и NodeJS Invite: https://t.me/joinchat/Be4rsT5Rsgq30DHutjxXgA Правила: http://telegra.ph/ru-chat-rules-06-19 Вакансии только с ЗП, не чаще раза в неделю.

Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

JavaScript — русскоговорящее сообщество
JavaScript — русскоговорящее сообщество
3 269 участник(ов)

Рекомендуем сразу отключить уведомления Правила: https://rudevs.network/ByaMH6un7 См. также: @js_noobs_ru, @nodejs_ru, @typescript_ru, @react_js, @electron_ru Вакансии и поиск работы: @javascript_jobs

JavaScript Noobs — сообщество новичков
JavaScript Noobs — сообщество новичков
2 484 участник(ов)

Чат для новичков

javascript_ru
javascript_ru
915 участник(ов)

Сообщество любителей самого популярного языка программирования в мире. Чат основан в 2009 году. Логи: https://goo.gl/9EOeM7 Поддержка бота: @chat_linker (ссылка на репу внутри) Вам будут интересны @frontend_ru и @css_ru

jsChat
jsChat
603 участник(ов)

Чат посвященный программированию на языке javaScript Перед отправкой ссылки на Ваш контент посоветуйтесь с админом Все ссылки удаляются ботом автоматически

JavaScript for Zombies Chat
JavaScript for Zombies Chat
492 участник(ов)

Чат про JavaScript для настоящих zombie! Вход строго по приглашениям! Ссылка для строгих приглашений: https://t.me/joinchat/AAMBHz3Uyr0tuZ7VaB029g

All That JS
All That JS
417 участник(ов)

JS на русском