jQuery调整li大小以适合ul
[英]Jquery resize li to fit ul
问题描述
到目前为止，我已经有了这段代码。 但这没有达到我的期望。 我希望整个ul方块都充满li的宽度。 如果您有3 li，那就是100/3。 如果您有4 li，那就是100/4，依此类推。
<!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>
4 个解决方案
解决方案1
1 已采纳 2013-10-07 21:42:13
您应该使用.length来获取所选元素的计数。
但是您应该只检查直接的孩子。
所以
$(function(){
var menu = $('#menu'),
children = menu.children();
children.width( menu.width() / children.length );
});
当然，您必须将边距/填充设置为0才能起作用。
解决方案2
1 2013-10-07 21:50:38
(function( $ ){
$.fn.autowidth = function() {
return this.each(function() {
$('li', this).css({'width' : (100 / $('li', this).length) + '%'})
});
};
})( jQuery );
$(document).ready(function(){
$('nav > ul').autowidth();
});
只需要box-sizing:border-box
解决方案3
0 2013-10-07 20:39:17
这是你想要的？ 看到小提琴-http: //jsfiddle.net/taneleero/TnXUm/
var count = 0;
$('li').each(function(){
count++;
});
$('li').css('width', $('ul').width()/count);
解决方案4
0 2013-10-07 21:26:43
var li_n = $('#main').children().length;
var total_width = $('#main').width();
$('#main li').each(function() {
$(this).width(total_width/li_n + '%');
});
我猜这就是您要寻找的。
ul li中的li的jQuery选择器
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.