Что в данном случае несет в себе this в цикле each?

Question

[ademar26]

Все привет! Возник очередной вопрос при разборе плагина autocomplete
К примеру у нас идет вызов функции по элементу

$('input[name=\'filter_name\']').autocomplete({
	'source': function(request, response) {
		$.ajax({
			url: 'index.php?route=product/autocomplete/autocomplete',
			type: 'get',
            data: {'filter_name': encodeURIComponent(request)},
			dataType: 'json',
			success: function(json) {
				response($.map(json, function(item) {
					return {
						label: item['name'],
						value: item['product_id']
					}
				}));
			}
		});
	},
	'select': function(item) {
		$('input[name=\'filter_name\']').val(item['label']);
	}
});

Далее идет сам плагин. Интересен момент, что в себе несет ссылка this в теле разбора each.
Это не ссылка на переопределение свойств click, show и так далее ?

(function($) {
	$.fn.autocomplete = function(option) {
		
		return this.each(function() {
			
			this.timer = null;
			this.items = new Array();

			$.extend(this, option);

			$(this).attr('autocomplete', 'off');

			// Focus
			$(this).on('focus', function() {
				this.request();
			});

			// Blur
			$(this).on('blur', function() {
				setTimeout(function(object) {
					object.hide();
				}, 200, this);
			});

			// Keydown
			$(this).on('keydown', function(event) {
				switch(event.keyCode) {
					case 27: // escape
						this.hide();
						break;
					default:
						this.request();
						break;
				}
			});

			// Click
			this.click = function(event) {
				event.preventDefault();

				value = $(event.target).parent().attr('data-value');

				if (value && this.items[value]) {
					this.select(this.items[value]);
				}
			}

			// Show
			this.show = function() {
				var pos = $(this).position();

				$(this).siblings('ul.dropdown-menu').css({
					top: pos.top + $(this).outerHeight(),
					left: pos.left
				});

				$(this).siblings('ul.dropdown-menu').show();
			}

			// Hide
			this.hide = function() {
				$(this).siblings('ul.dropdown-menu').hide();
			}

			// Request
			this.request = function() {
				clearTimeout(this.timer);

				this.timer = setTimeout(function(object) { console.log(object);
					object.source($(object).val(), $.proxy(object.response, object));
				}, 200, this);
			}

			// Response
			this.response = function(json) {
				html = '';

				if (json.length) {
					for (i = 0; i < json.length; i++) {
						this.items[json[i]['value']] = json[i];
					}

					for (i = 0; i < json.length; i++) {
						if (!json[i]['category']) {
							html += '<li data-value="' + json[i]['value'] + '"><a href="#">' + json[i]['label'] + '</a></li>';
						}
					}

					// Get all the ones with a categories
					var category = new Array();

					for (i = 0; i < json.length; i++) {
						if (json[i]['category']) {
							if (!category[json[i]['category']]) {
								category[json[i]['category']] = new Array();
								category[json[i]['category']]['name'] = json[i]['category'];
								category[json[i]['category']]['item'] = new Array();
							}

							category[json[i]['category']]['item'].push(json[i]);
						}
					}

					for (i in category) {
						html += '<li class="dropdown-header">' + category[i]['name'] + '</li>';

						for (j = 0; j < category[i]['item'].length; j++) {
							html += '<li data-value="' + category[i]['item'][j]['value'] + '"><a href="#">&nbsp;&nbsp;&nbsp;' + category[i]['item'][j]['label'] + '</a></li>';
						}
					}
				}

				if (html) {
					this.show();
				} else {
					this.hide();
				}

				$(this).siblings('ul.dropdown-menu').html(html);
			}

			$(this).after('<ul class="dropdown-menu"></ul>');
			$(this).siblings('ul.dropdown-menu').delegate('a', 'click', $.proxy(this.click, this));

		});
	}
})(window.jQuery);

Answer 1

[Владимир Сартаков]

return this.each(function() {
    // this - Это DOM элемент (input) без jquery методов, такой же как document.querySelectorAll('input[name=\'filter_name\']')[0]
   // а $(this) - это jquery  коллекция с одним элементом, как $('input[name=\'filter_name\']:eq(0)')
  );

Comments

[ademar26]

А что тогда внутри each $(this) если this это дум элемент. Почему тогда не вызывается к примеру код вместо этого к примеру

// Hide
      this.hide = function() {
        $(this).siblings('ul.dropdown-menu').hide();
      }

Вот так

// Hide
      this.hide = function() {
        this.siblings('ul.dropdown-menu').hide();
      }

[Владимир Сартаков]

ademar26, Потому что DOM элемент это не jquery обьект и следовательно у него нет методов jquery.
siblings() - это метод jquery, а не DOM API

[ademar26]

this.hide =
Тогда получается мы переопределяем свойство hide для DOM элемента так?

[Владимир Сартаков]

ademar26, Да, верно.
Не очень подход у плагина, сделали бы хотя бы:

let autoComp = {
  hide: function(){...},
  some: function(){...}
}
autoComp.other = function(){...};
this.autocomplete = autoComp ;

[Ihor Bratukh]

На уровне return $.each(this) this это тоже самое, что $(this)
Внутри $.each this это просто dom элемент, не jQuery. Чтобы использовать методы jQuery нужно обернуть его в $(this)

[Владимир Сартаков]

BRAGA96, Да верно.
Сперва(в плагине) jq обьект, а внутри each - DOM элемент

[ademar26]

autocomplete.other = function(){...};
this.autocomplete = autoComp ;

Тут местами наверное поменять. Сначало набор присваиваем а потом добавляем к набору свойство other

[Владимир Сартаков]

ademar26, Я там просто опечатался, имелось ввиду:

let autoComp = {
  hide: function(){...},
  some: function(){...}
}
autoComp.other = function(){...};
this.autocomplete = autoComp ;

Answer 2

[Евгений]

сам элемент $('input[name="filter_name"]')

Comments

[ademar26]

Думаю что нет, так как вот вызовы то идут через обвертку $(this).after('');

[ademar26]

Или вот наглядно тут

// Hide
      this.hide = function() {
        $(this).siblings('ul.dropdown-menu').hide();
      }

[Евгений]

ademar26, логично, он у текущего $('input[name="filter_name"]') ищет соседние элементы 'ul.dropdown-menu' и прячет их

[Евгений]

ademar26, если $('input[name="filter_name"]') будет 2, то return this.each(function() { выполнится дважды, и в каждой итерации в this будет свой экземпляр $('input[name="filter_name"]')

[Евгений]

ademar26,
перед $(this).attr('autocomplete', 'off'); пропишите console.log($(this)); и увидите элемент

[ademar26]

Тоесть this.hide это отработка функции на массив.

[ademar26]

Так this.hide = это не переопределение свойства jq ?

[Владимир Сартаков]

ademar26, нет this.hide - это создание нового метода hide у DOM элемента

[ademar26]

Владимир Сартаков, Вот это и хотел услышать спс Вам :)

[ademar26]

А метод jq создается вот так как к примеру создался метод $.fn.autocomplete = function(option) {
для дальнейшей работы с элементами jq

[Владимир Сартаков]

ademar26, Да, верно $.fn.autocomplete = function(option) {...
Потом его можно использовать, как обычно:
$("input").autocomplete();