如何使用 jquery 获取最长宽度作为所有 $('li') 的宽度

Question

<ul>
  <li>Short</li>
   <li>Short</li>
   <li>Short
    <ul>
       <li>Short</li>
       <li>Longer</li>
       <li>This is the longest (how do i get this longest width as width of all LI siblings with in this UL only)</li>
   <ul>
   </li>
</ul>

Answer 1

也许您可以使用 offsetWidth 属性。
<代码>

function getMaxLiWidth(){
  var maxWidth = 0;
  $('li').each(function(i){
    if(this.offsetWidth > maxWidth)
      maxWidth = this.offsetWidth;
  });
  return maxWidth;
}

If you want to return the 'li'element with the longest width, you should probably save the 'i' indice in the function and then you could select it such as: $('li:nth-child('+i+')').
The function would then be :

function getMaxLiWidth(){
  var maxWidth = 0,index=0;
  $('li').each(function(i){
    if(this.offsetWidth > maxWidth)
      {
        maxWidth = this.offsetWidth;
        index = i;
      }
  });
  return $('li:nth-child('+index+')');
}

Answer 2

ul 应该环绕 li 并成为最宽 li 的宽度，因此查看 ul 的宽度应该可以解决问题，除非 ul 是 display: block 和 non-floatet

Answer 3

你实际上不能这样做，因为 li 元素是块级的。这意味着它们会自动占据父元素的整个宽度。 请参阅此 jsFiddle 来说明这一点。

Answer 4

li-tag 的宽度取决于 ul-width，因此如果您有 ul display:block，li-width 将返回 ul 的宽度（100%）；

但是您可以获取 li 标签内内联元素的宽度。
如果 li 内没有内联元素:-)

var maxWidth = 0;
//total amount of li-tags
var maxli = $('ul li').length-1;

$('ul li').each(
    function(index){
            //wrap li-content width inline element like <span>
        $(this).wrapInner( "<span></span>");

            //get max-width of spans
        if( $(this).children('span').width() > maxWidth ){
            maxWidth = $(this).children('span').width();
        }

        //complete
        if(index == maxli){
                    //set width of parent ul-tag to max-size of the longest li-tag
            $(this).parent('ul').width(maxWidth);
        }   
    }
);