jquery width() method always updates the initial width

Question

I am new to javascript and jquery. I need help to understand the following block of code:

An unordered list with 4 list items:

<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>

The following is the jquery code -

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

I expect the width of the second list item to be 75% of 50% of the initial width (on page load). However, the width is only 75% of the initial width. I thought the first jquery statement affect the next one?

try following way $('li').css('width','50%'); $('li#two').css('width','75%') — Hanif
– Hanif, Commented Oct 19, 2017 at 11:35
Try using google before SO. Width in % refers to parent width. — VTodorov
– VTodorov, Commented Oct 19, 2017 at 12:18

Taha Paksu · Accepted Answer · 2017-10-19 11:43:22Z

2

This is the correct behaviour of jQuery.width() method. The code you should use is like this:

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

Because you need to get the 3 quarters of the current width. Not the initial width.

answered Oct 19, 2017 at 11:43

Taha Paksu

15.6k2 gold badges50 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

M0nst3R · Accepted Answer · 2017-10-19 11:46:07Z

1

When you specify percentage width, the percentage refers to the width of the parent (the ul in your case) and not the previous li width you have set. In other words, li#two is not a subset nor a child of li. What you can do is declare the initial width as a variable then use multiples of it, something like:

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

answered Oct 19, 2017 at 11:46

M0nst3R

5,3131 gold badge28 silver badges39 bronze badges

3 Comments

debashish Over a year ago

Are you sure that percentage width refers to the parent width, and not the current width of the li (because width is not an inherited property) ?

M0nst3R Over a year ago

When you provide a percentage width, you immediately ask the question: percentage of what ? And the answer is: the parent's width. Here is a codepen illustrating the behavior.

debashish Over a year ago

Thanks for the clarification. My confusion was due to the fact that I was changing the width set by CSS using jquery. But it is clear now.

Collectives™ on Stack Overflow

jquery width() method always updates the initial width

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related