"this" внутри создаваемого объекта

@BART96 · Регистрация: 04.02.2015

Author24 — интернет-сервис помощи студентам

Пытаюсь создать объект с определенными параметрами и сдвинуть его вниз на длину созданного объекта.

Javascript

str_length = (function(text){
    return $('<span/>', {html:text})
        .appendTo($('body')
        .css({'margin-top':$(this).css("width")});
})()

Однако $(this) выдает undefined. Конечно же можно разбить задачу на 2 части:

Javascript

str_length = (function(text){
    var obj = $('<span/>', {html:text})
        .appendTo($('body');
    
    obj.css({'margin-left':obj.css("width")});
})()

Но не хотелось бы ради такой ерунды создавать доп.переменную. Можно ли как-то иначе вычислить размер объекта в момент его создания ?

@sad67man · 04.04.2017, 21:36

BART96,

Javascript

str_length = (function(text){
    return $('<span/>', {html:text})
        .appendTo('body')
        .css({'margin-top':function(){return this.offsetWidth;}});
})('Lorem ipsum dolor sit amet, consectetur <a href="#"> adipisicing</a> elit. Molestiae commodi necessitatibus ea, excepturi non pariatur explicabo placeat quo id? Inventore quaerat quisquam, dolore pariatur ipsum odio dolorem vero qui beatae.');

Добавлено через 6 часов 53 минуты
BART96, Вообще вас не должна смущать доп переменная. Ведь ей присваивается только ссылка на объект, и это никак не влияет на скорость работы скрипта, а вот если вы к примеру напишете так

Javascript

1	.css({'margin-top':function(){return $(this).width()}});

То получается, что вы лишний раз вызовете метод jQuery и сформируете новый объект $(this).

Не до конца понимаю для чего используется такая конструкция не проще ли сделать так?

Javascript

1 2	str_length = $('<span/>', {html:'Тут текст'}).appendTo('body'); str_length.css({'margin-top':str_length.css("width")});

Может быть вы проясните ситуацию?)

@BART96 · 04.04.2017, 23:19 **[ТС]**

sad67man, огромное спасибо за ответ. В первом случае очень удивился, когда $(this) выдало ошибку. Насколько я понимаю, объект в jQuery передается от одной функции к другой. А значит и $(this) должен постоянно указывать на сам объект. Но почему-то нет ...

Javascript

1	.css({'margin-top':$(this).css("width")}) // error this == undefined

Спасибо за разъяснение второго варианта. Воспользуюсь им

Javascript

1 2	str_length = $('<span/>', {html:'Тут текст'}).appendTo('body'); str_length.css({'margin-top':str_length.css("width")});

А причина убогости кода проста - хотел максимально упростить его, чтоб отвечающим не пришлось тратить время на разбор )

@sad67man · 05.04.2017, 14:39

BART96, по поводу this. this указывает на объект, являющийся текущим контекстом вызова функции. Проще говоря указывает на объект который вызвал функцию. Соответственно и используется только внутри функции. Для наглядности можно было бы написать такой метод jQuery

Javascript

$.fn.addMargin = function() {
    this.css('margin-top', this.width());
  return this;
}
 
str_length = $('<span/>', {html:'Тут текст'}).appendTo('body').addMargin();

А если вы пытаетесь написать вот так

Javascript

1	.css({'margin-top':$(this).css("width")})

То это будет тоже самое что и

Javascript

1 2	var width = $(this).css("width"); $(selector).css({'margin-top': width })

Возникает вопрос - на что указывает this? Скорее всего this указывает на window.

	05.04.2017, 14:39

"this" внутри создаваемого объекта

Решение