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

如果你想要返回宽度最长的'li'元素，你可能应该在函数中保存'i'指示，然后你可以选择它，例如：$('li:nth-child('+i+')')。
该函数将是：

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：block和non-floatet

Answer 3

你不能真的这样做，因为li元素是块级别的。这意味着它们会自动占据父元素的整个宽度。 See this jsFiddle to show this

Answer 4

li-tag的宽度取决于ul-width，所以如果你有ul display：block，li-width将返回ul的宽度（100％）;

但是你可以在li-tag中获得内联元素的宽度。如果你在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);
        }   
    }
);

如何使用jquery获得所有$（'li'）宽度的最长宽度

4 个答案: