jquery調整li以適合ul

到目前爲止我有這個代碼。但它沒有達到我期望的水平。我想要整個ul塊填充li的寬度。如果你有3立方米，那將是100/3。如果你有4個李，那就是100/4等等。jquery調整li以適合ul

<!DOCTYPE html> 
<html> 
<head> 

<title>Hello</title> 
<link rel="stylesheet" type="text/css" href="css/style.css"/> 
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 

<script language = "javascript" type="text/javascript"> 
    $(function(){ 
    var width = $("#menu").width(); 
     var res = Math(width/$("#menu li")); 
    $("#menu li").width()= res; 
    }); 
</script> 

</head>

<ul id = "menu"> 
    <li><img src="img/mooo.jpg" /></li> 
    <li><a href ="#">Home</a> 
     <ul class = "sub1"> 
      <li><a href ="#">News</a></li> 
     </ul> 
    </li> 
    <li><a href ="#">soccer</a> 
     <ul class = "sub1"> 
      <li><a href ="#">goal</a></li> 
      <li><a href ="#">ball</a></li> 
      </ul> 
    </li> 
    <li><a href ="#">Contacts</a></li> 
</ul> 

<div id "main"> 
<h2> Goal </h2> 
</div>

來源

2013-10-07 Muteking

你可以發佈ul的CSS樣式嗎？ –

var res = Math（width/$（「＃menu li」））; < - 「menu li」是DOM節點的列表。你不能用DOM節點進行數學計算 –

你至少選擇$（「＃menu li」）來選擇所有的li，只要選擇最高級別的列表項就可以試試$（「＃menu> li」）。然後看看Jquery的長度選項http://api.jquery.com/length/ –

您應該使用.length來獲取所選元素的數量。

但是，你應該只檢查直接孩子..

所以

$(function(){ 
    var menu = $('#menu'), 
      children = menu.children(); 

    children.width(menu.width()/children.length); 
});

Ofcourse，你將有邊距/內邊距設置爲0，這個工作..

來源

2013-10-07 21:42:13

這是你在找什麼？看到小提琴 - http://jsfiddle.net/taneleero/TnXUm/

var count = 0; 

$('li').each(function(){ 
    count++; 
}); 

$('li').css('width', $('ul').width()/count);

來源

2013-10-07 20:39:17

'$（'li'）。length'也適用。而且它不需要循環。 –

var li_n = $('#main').children().length; 
var total_width = $('#main').width(); 
$('#main li').each(function() { 
    $(this).width(total_width/li_n + '%'); 
});

我猜這是你在找什麼。

來源

2013-10-07 21:26:43 user2816715

(function($){ 
    $.fn.autowidth = function() { 
    return this.each(function() {   
     $('li', this).css({'width' : (100/$('li', this).length) + '%'}) 
    }); 
    }; 
})(jQuery); 

$(document).ready(function(){ 
    $('nav > ul').autowidth();  
});

Codepen Example

只需要box-sizing:border-box

來源

2013-10-07 21:50:38

jquery調整li以適合ul

回答

相關問題