jQuery的每選擇行爲不同

我創建了jQuery的一個函數，它應該是垂直居中元素（使用CSS我不能這樣做，累了，只是使它programically ^^）。現在的問題是，我最初使用.each創建它，然後，因爲它已經是創建者，所以我嘗試使用選擇器（$（'something'）。center）調用它，但由於某種原因它的行爲不同。jQuery的每選擇行爲不同

使用選擇，它似乎是在做一樣的每一個元素。它使用第一個元素完成，然後將所有值應用於其餘元素。因此，舉例來說，我的函數將元素高度和做一些操作它，而是選擇只需要第一個，然後應用它的參數大家..

我會繼續使用，因爲每一個它的工作原理最佳右現在，但我仍然無法理解他們爲什麼這樣做的..

定心功能：

$.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/

來源

2014-11-15 Luis Eduardo Rojas Cabrera

對於簡單的東西，比如只是改變了CSS在具有相同類的所有元素以同樣的方式，你可以直接調用它，而無需使用.each()。例如：

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

但是，如果每一個的div的需要與個人價值，最終，你應該使用.each()。例如（抱歉，這是一個有點怪）：

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

基本上，如果你不使用.each()，它會檢查你想改變什麼，並將其應用到與該類別的所有元素（只有一次！）。如果您確實使用.each()，它會爲每個元素單獨執行。

來源

2014-11-15 02:02:36 Niffler

不太確定如何回答這個問題？ – plalx

問題是爲什麼「Jquery each和Selector」的行爲不同;這就是我試圖回答... – Niffler

是的它確實:)非常感謝！ –

簡而言之，this一個jQuery插件功能中不是一個DOM節點的例子。它是圍繞選擇器匹配的所有節點的jQuery對象。

你的函數體而應是這樣的：

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

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

來源

2014-11-15 01:52:28 plalx

JSF好吧。 –

@Godisgood不想以某種方式加載，但基本上用我在答案中寫的代碼替換了插件函數中的所有代碼。然後，將所有先前的代碼放在'var $ el = ...;'後面，最後在舊代碼的每個地方將'this'替換爲'$ el'。 – plalx

明白了。謝謝。 –

jQuery的每選擇行爲不同

回答

相關問題