jQueryPlugin: вернуть это против возврата this.each ()

Question

Да, есть много тем по этому поводу, но я до сих пор не понял.

Я приготовил два jsfiddle:

вернуть это

вернуть this.each ()

Какая разница? Там много ответов, но мои примеры показывают тот же результат. Так что некоторые из этих ответов могут быть неверными!?

---

что делает "return this.each ()" в jQuery?

«Он позволяет вызывать плагин или событие для группы элементов, а затем применять ту же функцию или событие ко всем из них» -> также работает с return this

«Это позволяет объединять несколько функций» -> то же самое здесь

"Позволяет вам делать такие вещи, как: $("mySelector").foo().show();" -> Я все еще могу это делать, когда использую return this

---

Я также создал другой jsfiddle, который показывает - на мой взгляд - что не имеет значения, если вы упаковываете свой код в return this.each();:

http://jsfiddle.net/7S3MW/1/

Консоль Chrome показывает тот же вывод!

Так в чем же разница?

Answer 1

Две вещи:

1. Ваши примеры ошибочны в том, что они делают одно и то же для каждого элемента.
2. Реальная проблема не в return this против return this.eachпроблема this против this.each.

Для (1) , рассмотрите разницу между этим плагином:

(function($) {
    $.fn.mangle = function(options) {
        this.append(' - ' + this.data('x'));
        return this;
    };
})(jQuery);

Демонстрация:http://jsfiddle.net/ambiguous/eyHeu/

И этот плагин:

(function($) {
    $.fn.mangle = function(options) {
        return this.each(function() {
            $(this).append(' - ' + $(this).data('x'));
        });
    };
})(jQuery);

Демо: http://jsfiddle.net/ambiguous/5dMMH/

Итак, вы видите, вам нужно использовать this.each, если вам нужно обработатьОтдельные элементы в this установлены по-разному.У вас были бы аналогичные эффекты, если бы вашему плагину приходилось прикреплять специфичные для элемента данные к каждому элементу: если бы вы не использовали each, то вы в конечном итоге прикрепили бы одинаковый фрагмент данных ко всем элементам внутри thisи это только оставило бы вас в замешательстве о том, почему информация повсюду кровоточит.1037 *x.each(...) возвращает x в любом случае.

Answer 2

Позвольте мне показать вам два «эквивалентных» фрагмента кода, которые могли бы прояснить ваш вопрос:

С функцией jQuery "каждый":

(function($) {
    $.fn.mangle = function(options) {
        return this.each(function() {
            $(this).append(' - ' + $(this).data('x'));
        });
    };
})(jQuery);

Без jQuery "каждая" функция:

(function($) {
    $.fn.mangle = function(options) {
        var objs = this;
        for (var i=0; i<objs.length; i++) {
            var obj = objs[i];
            $(obj).append(' - ' + $(obj).data('x'));
        };
        return this;
    };
})(jQuery);

Таким образом, в основном, функция each используется для применения некоторого кода ко всем элементам, содержащимся в объекте this ( как this обычно относится к группе элементов, возвращаемых селектором jQuery ) и вернуть ссылку на this (, так как each функция всегда возвращает эту ссылку - чтобы разрешить цепочку вызовов - )

В качестве примечания : Второй подход ( - for loop- ) быстрее (особенно в старых браузерах), чем прежний ( - each функции- ).

Answer 3

Они оба абсолютно одинаковы..each() возвращает this, поэтому return this.each() точно такой же, как this.each(); return this;

Редактировать: метод makeRed вашей новейшей скрипки не возвращает this и, следовательно, не является цепным.