Question

我是javascript和jquery的新手。我需要帮助才能理解以下代码块：

包含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语句影响下一个语句？

Answer 1

这是jQuery.width()方法的正确行为。你应该使用的代码是这样的：

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

因为您需要获得当前宽度的3个季度。不是初始宽度。

Answer 2

指定百分比宽度时，百分比是指父级的宽度（在您的情况下为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));的子项。你可以做的是将初始宽度声明为变量，然后使用它的倍数，如：

   sn   we
   200  8.8
   99.3 10

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

2 个答案: