Question

我在Jquery中创建了一个函数，它应该是垂直居中的元素（我不能用css做它，累了，只是以编程方式^^）。现在的问题是我最初使用.each创建它，然后，因为它已经是创建者，我尝试使用选择器调用它（$（＆＃39; something＆＃39;）。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');

但是如果每个div都需要以单个值结束，则应使用.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
});

每个Jquery和Selector表现不同

2 个答案: