Question

I need to set the width of <li> based on the maximum string length of the element from the <a> which is child of <li>.

<ul id="hi">
    <li class="">
        <a >Maintenance</a>
    </li>
    <li class="">
        <a >Query</a>
    </li>
    <li class="">
        <a >Approve Level </a>
    </li>
    <li class="">
        <a >Reverse</a>
    </li>
    <li class="">
        <a >Refund Charges</a>
    </li>
    <li class="">
        <a > Update After </a>
    </li>
    <li class="">
        <a > Update After  Update After  Update After  Update</a>
    </li>
</ul>

I just want to get the largest string width of the <a> (in the above case last <a> and set the width of all <li> through the script. Please give me a solution

Answer 1

This jQuery snippet will save the length of the longest string to max:

var length, max = 0;
$('#hi li a').each(function(){
    length = $(this).text().length;
    max = length > max ? length : max;
});

Example can be found here