Question

所以我有几个动态生成的<span>个元素。问题是我需要一起知道它们的宽度。我尝试用<div>包裹它们并制作alert($("#spanWrap").width());，但它给出了容器宽度而不是<span>元素。

我想我可以尝试通过jsFiddl来解释它：http://jsfiddle.net/XGynv/7/

Answer 1

除非你编写自己的代码来添加每个跨度的宽度，否则你无法做到这一点。

var w = 0;
$("#divMenuSpan span").each(function(){
  w += $(this).width();
});

//Now w will have the combined width of all the spans inside divMenuSpan

Answer 2

将display: inline-block;添加到包裹跨度的div的样式中。

修改

将扫描包裹在div中，如

中所示

<div id="spanwrapper">
   <span>span1</span>
   <span>span2</span>
</div>

css样式应该包含（按此顺序，请参阅gilly3的评论）：

#spanwrapper {
   display: inline-block;     // the div shrinks to fit around the content
}

#spanwrapper {
   *display: inline;          // adding support for IE7 or lower
}

这样你就可以使用jquery获得宽度：

$("#spanwrapper").width();

或使用传统的javascript：

document.getElementById('spanwrapper').clientWidth;

请注意，使用浏览器定义的大小，现在在样式中定义固定宽度没有意义。

Answer 3

这是一个明显的答案，但你可以做 -

parseInt($("#fashion").width()) + parseInt($("#wedding").width())

Answer 4

如果您只是将容器更改为跨度而不是div

，那么可能会更容易

<span id="divMenuSpan">

http://jsfiddle.net/XGynv/8/

Answer 5

我更新了您的jsFiddle。

基本上我正在遍历跨度并总结宽度。

Answer 6

这是因为div是块元素，块元素总是填充其容器的宽度。要使div适合其内容的宽度，请将其浮动：

http://jsfiddle.net/XGynv/12/

#wrap
{
    width: 666px;
    overflow: hidden;
}
#divMenuSpan
{
    float: left;
}

编辑：我应该指出，如果您的跨度换行，浮动容器div的宽度将使用此技术缩小。如果你想要跨度的实际宽度，你必须在循环中迭代div并加上它们宽度的总和。

Answer 7

像

这样的东西

var size = 0;
$('span.someclass').each(function(el) { size += $(el).width(); });

Answer 8

您可以编写javascript代码进行计算。

$(document).ready(function() {
    var spans = $("span"),   //span collection
        width = 0; 
    spans.each(function(index,ele){
        width = width + $(ele).outerWidth(true); //here, it will include margin.
    });
    console.log(width);
});

是否可以获得多个<span>元素的宽度？</span>

8 个答案: