Detect width using Javascript

Question

I am looking to obtain the width of each <li> within the main navigation bar which can be obtained from the main LI. Whilst the below code works it seems to apply the same width to the following LI's rather than detecting it's own individual size.

How would I go about making this dynamic please?

$('.navbar-nav-middle li').width($('.navbar-nav-middle a').parent().width());

Answer 1

You need to use contextual this enclosed with a function here:

$('.navbar-nav-middle li').width(function () {
  return $(this).find("a").parent().width()
});

This might still give the same thing, as <li> takes up its content's width.