jQuery - 如果元素被隱藏，$(this).width() 不起作用！

Question

如何獲取隱藏元素的寬度（以 css 樣式設置）？

css：

a{
  position: absolute;
  width: 40px;
  height: 40px;
  background: pink;
}

js：

var nav = $('.nav');
nav.hide();

nav.hover(function(){
  nav.stop().animate({opacity: 1}, 300);
}, function(){
  nav.stop().animate({opacity: 0}, 500);
});

$('<a>', {
css: { left: 940 / 2 - ($(this).width() / 2), // <-- here it seems to be 0
click: function(){
    alert($(this).width()); // here it works
    return false;
  }
}).appendTo(nav);

Answer 1

這可能是不可能的，因為在這種情況下$(this)指的是window object 而不是<a>元素。 只有在 function 的上下文中調用時， this引用才會正確綁定到新創建的元素。

可能有一種方法可以使用閉包將元素注入this ，但我不知道如何 - 有興趣看看是否有人能提出解決方案。

在那之前，這個替代方案不太優雅，但總是有效：

mylink = $('<a>', {
    id: 'test',
   click: function(){
   alert($(this).width()); // here it works
   return false;
 }
}).appendTo($("body")).html("Test");;

mylink.css({ left: mylink.width() / 2});

JSFiddle

Answer 2

- 假設您想要.nav 元素（已隱藏的元素）的寬度。

由於您使用的是$('<a>')您實際上是在創建一個錨標記，在這種情況下 $(this) 將引用錨元素而不是 .nav 元素，因此它的寬度為 0。

如果你想獲得 .nav 元素的寬度，你可以使用

$('.nav').width(); 這將為您提供匹配元素的寬度。

Answer 3

請試試這個：

$('a').click(function(){
    $(this).appendTo(nav);
    alert($(this).width());
    $(this).css('left', ($(this).width() / 2));
    return false;
})