jQuery - $(this).width()在隐藏元素时不起作用

jQuery - $(this).width() doesn't work if the element is hidden!

本文关键字：隐藏 元素 不起作用 width this jQuery      更新时间：2023-09-26

如何获得隐藏元素的宽度(在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);

这可能是不可能的，因为$(this)在本例中指的是window对象，而不是<a>元素。只有在函数的上下文中调用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

-假设您想要的是。nav元素(已隐藏的元素)的宽度。

因为你使用的是$('<a>')，你实际上是在创建一个锚标签，在这种情况下，$(this)将指向锚元素，而不是。nav元素，所以它的宽度是0。

如果你想获得。nav元素的宽度，你可以使用

$('.nav').width();，这将得到你匹配元素的宽度

请试试:

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