[smallbeer]

Afternoon all,

With JQuery is it possible to find the length of something (a list item in this case) and then add a CSS rule (some padding) to another item using that length value?

Much appreciated.

[Bill Posters]

Do you mean the character length or the px length?

[smallbeer]

Teh posters!

The pixel length.

[Bill Posters]

As the list items are block-level, they expand to fill the available space by default. So, to get the px width of the content, rather than the list item itself, you'll either need to make them inline, float and clear them or wrap the textual content in an inline element - e.g. span. This'll mean the list item will wrap neatly around the content.

…

$(document).ready(init);

function init() {

	var el = $('.thisitem')[0];
	var elCharL = el.firstChild.length;
	var elPXw = $(el).width();
	var elTxt = $(el).text();

	alert('element: ' + el + '\ncharacter length: ' + elCharL + '\npixel width: ' + elPXw + '\ntext: ' + elTxt);

}


…

<ul>
	<li>item one</li>
	<li class="thisitem">item two</li>
	<li>item three</li>
	<li>item four</li>
</ul>

If you're wrapping the content in a span, then obviously you'll need to target the span element in the el var instead…

var el = $('.thisitem span')[0];
…

<ul>
	<li><span>item one</span></li>
	<li class="thisitem"><span>item two</span></li>
	<li><span>item three</span></li>
	<li><span>item four</span></li>
</ul>

[3n1gm4]

regular javascript can, look into offsetHeight and offsetWidth