[英]how to get li width + margin using jquery
我的代码是这样的
//css
li{display:inline-block}
//html #li margin and width are dynamic
<ul>
<li style='margin:30px;width:100px;'>Pic</li>
<li style='margin:40px;width:200px;'>Pic</li>
<li style='margin:10px;width:500px;'>Pic</li>
<li style='margin:50px;width:300px;'>Pic</li>
</ul>
如何创建一个jquery函数,它将一个li索引作为输入,它将从头开始返回所有li的宽度到index + margin'left + right'
Examples // something like this
myFunction(1); //output 440 (( 30 margin-left [0] + 30 margin-right [0] + 40 margin-left [1] + 40 margin-right [1] + 100 width [0] + 200 width [1] ))
myFunction(2); //output 960 (( 30 margin-left [0] + 30 margin-right [0] + 40 margin-left [1] + 40 margin-right [1] + 10 margin-left [2] + 10 margin-right [2] + 100 width [0] + 200 width [1] + 500 width [2] ))
你正在寻找outerWidth(true)
例如
$('li:eq(0)').outerWidth(true)
如果你不想要边距,但只想要填充和边框,只需要做outerWidth()
所以你可以正常加上li的outerWidth来得到它们的总和。
$.fn.sumOuterWidth = function(useMargins) {
var sum = 0;
this.each(function() {
sum += $(this).outerWidth(useMargins);
});
return sum;
};
// example sum the width of the first 2 li's:
$('ul li').slice(0,2).sumOuterWidth(true)
// Also gets the sum of the width of the first 2 li's:
$('ul li:eq(1)').prevAll().andSelf().sumOuterWidth(true);
//adapt selectors to get only the ul you want
function calculate(i) {
if(i >= $("ul").size()) {
alert("This index doesn't exist");
return;
}
var sum = 0;
for(var j=0; j<=i; j++) {
sum = sum + $("ul li:eq("+j+")").outerWidth(true);
}
alert("li's width for index "+i+" is "+sum)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.