В jQuery, как работает this.each ()?

Question

Чтобы сделать мой вопрос более конкретным, я прочитал документацию по .each () для jQuery, но я немного запутался.У меня есть этот код:

$.fn.imgAreaSelect = function (options) {
options = options || {};

this.each(function () {
    if ($(this).data('imgAreaSelect')) {
        if (options.remove) {
            $(this).data('imgAreaSelect').remove();
            $(this).removeData('imgAreaSelect');
        }
        else
            $(this).data('imgAreaSelect').setOptions(options);
    }
    else if (!options.remove) {
        if (options.enable === undefined && options.disable === undefined)
            options.enable = true;

        $(this).data('imgAreaSelect', new $.imgAreaSelect(this, options));
    }
});

if (options.instance)
    return $(this).data('imgAreaSelect');

return this;

};

Теперь я не понимаю, почему каждая функция не имеет индекса или элемента?Этот фрагмент кода взят из плагина jQuery, который я пытался прочитать.Я также не совсем понимаю $ .fn.наверху я знаю, что это означает прототип, но что именно здесь происходит?

Answer 1

Каждая функция может принимать функцию, принимающую индекс в качестве параметра, но это необязательно.

Для простоты, .each был реализован так, чтобы this ссылался на текущий элемент.

Однако .each может принять индекс в качестве параметра для своего обратного вызова.

В jQuery API есть пример использования

$('li').each(function(index) {
    alert(index + ': ' + $(this).text());
});

Справочник - http://api.jquery.com/each/

Answer 2

Индекс не нужен, поскольку this предоставляет контекст.Как отмечается в документах , «Значение также можно получить с помощью ключевого слова this».Это достигается с помощью call .Что-то вроде:

userFunction.call(valueOfElement, indexInArray, valueOfElement);

$.fn.imgAreaSelect = function (options) означает, что функция добавляется в прототип.Это позволяет использовать его с любым экземпляром объекта jQuery.

Answer 3

$.each(fn) вызывает fn для каждого элемента, содержащегося в текущем контексте. Каждый раз, когда он вызывает fn, он передает «текущий» элемент как this.

Итак, в следующем примере:

$("div").each(function() {
    alert(this.className);
});

Появится одно предупреждение для каждого <div> в DOM и отобразится имя класса каждого.