jquery width（）方法总是更新初始宽度

我是javascript和jquery的新手。我需要帮助理解下面的代码块：jquery width（）方法总是更新初始宽度

无序列表与4列表项：

<ul> 
    <li id="one" class="hot"><em>fresh</em> figs</li> 
    <li id="two" class="hot">pine nuts</li> 
    <li id="three" class="hot">honey</li> 
    <li id="four">balsamic vinegar</li> 
</ul>

以下是jQuery代码 -

$('li').width('50%'); 
$('li#two').width('75%');

我期望的宽度第二个列表项目为初始宽度的50％（在页面加载时）的75％。但是，宽度仅为初始宽度的75％。我认为第一个jquery声明影响下一个？

来源

2017-10-19 debashish

为什么不使用CSS设置宽度？ – tonoslfx

试试以下方法$（'li'）.css（'width'，'50％'）; $（'li＃two'）.css（'width'，'75％'） – Hanif

尝试在SO之前使用谷歌。宽度以％表示父宽度。 – VTodorov

指定百分比宽度时，百分比指的是您设置的父宽度（您的案例中的ul），而不是之前的li宽度。换句话说，li#two不是li的子集也不是孩子。你可以做的是声明最初的宽度作为一个变量，然后使用它的倍数，如：

let originalWidth = 0.5; 
function getPercentWidth(width) { 
    return ((width * 100) + '%'); 
} 
$('li').width(getPercentWidth(originalWidth)); 
$('li#two').width(getPercentWidth(0.75 * originalWidth));

来源

2017-10-19 11:46:07

你确定百分比宽度是指父宽度，而不是'li'的当前宽度（因为'width'不是继承的属性）？ – debashish

当你提供一个百分比宽度时，你会立即问这个问题：百分比是什么？答案是：父母的宽度。这是一个说明行为的[codepen]（https://codepen.io/glouhaichi/pen/RLvyoE）。 –

感谢您的澄清。我的困惑是由于我改变了CSS设置的使用jQuery的宽度。但现在很清楚。 – debashish

这是jQuery.width()方法的正确行为。您应该使用的代码如下所示：

$("li#two").width($("li#two").width() * 0.75);

因为您需要获取当前宽度的三分之三。不是初始宽度。

来源

2017-10-19 11:43:22

jquery width（）方法总是更新初始宽度

回答

相关问题