JQuery каждый и Selector ведут себя по-другому

Question

Я создал функцию в JQuery, которая должна центрировать элементы по вертикали (я не мог сделать это с помощью css, устал и просто сделал это программно ^^). Проблема в том, что я изначально создал ее с использованием .each, а затем, поскольку она уже была создателем, я попробовал называть ее с помощью селектора ($ ('something'). Center), но по какой-то причине он ведет себя по-другому.

Использование селектора, похоже, делает то же самое для каждого элемента. Он делает это с первым элементом, а затем просто применяет все значения к остальным элементам. Так, например, моя функция занимает высоту элемента и выполняет некоторые операции с ней, но селектор просто берет первый, а затем применяет свои параметры для всех.

Я буду продолжать использовать каждый, так как он работает лучше всего сейчас, но я до сих пор не могу понять, почему они делают это ..

центрирования Функция:

$.fn.center = function(){ 
/*If this is the highest element, or 
    if this element has full use of the width, 
    then there's no need to align it. 
*/ 

if(this.height() == this.parent().height() || 
this.width() == this.parent().width()) 
{ 
    this.css({ 
     position : "relative", 
     top : 0 
    }); 
} 
else //Should be aligned. 
{ 
    this.css({ 
     position : "relative", 
     top : (this.parent().height()/2)-(this.height()/2) 
    }); 
} 
return this; //Used for chaining. 

};

Вот пример того, что я имею в виду ^^ http://jsfiddle.net/lrojas94/pmbttrt2/1/

Answer 1

Для простых вещей, как только изменяя CSS таким же образом, для всех элементов с одинаковым классом, вы можете вызвать его непосредственно, без использования .each(). Например:

$('.elem').css('color', '#fff'); 

Но если каждый из дивы должен в конечном итоге с индивидуальным значением, вы должны использовать .each(). Например (жаль, что это немного странно):

var border = 1; 
$('.elem').each(function() { 
    $(this).css('border', border + 'px solid #000'); 
    border += 1; 
}); 

В принципе, если вы не используете .each(), это будет проверить, что вы хотите изменить и применить его ко всем элементам с этим классом (только один раз!) , Если вы используете .each(), он будет делать это индивидуально для каждого элемента.

Answer 2

Проще говоря, this в функции плагина Jquery не DOM узел. Это объект jQuery, который обтекает все узлы, которые были сопоставлены селектором. Тело

Вашей функции должно скорее выглядеть следующим образом:

return this.each(function() { 
    var $el = $(this); 

    //centering logic for $el goes here 
});