最好的方法是什么? 我尝试过:
var listWidth = [];
$('ul li').each(function() {
listWidth.push($(this).width());
});
虚拟代码:
<ul>
<li>Item 1</li>
<li>Longer item
<li>Even longer item</li>
</ul>
CSS:
ul {
width: some fixed width;
}
但它只是返回所有相同的宽度,这也是实际列表项的宽度,而不是文本的宽度。
编辑:我想要文本的宽度(以像素为单位)。不是列表本身宽度的字符数
最佳答案
将文本包裹在 <span>
中s 并获取它们的宽度。 <li>
标签是 block ,将扩展到 <ul>
的宽度而<span>
标签是内联的,并且仅占据所需的宽度(在本例中,围绕字符)。
var listWidth = [];
$('ul > li > span').each(function() {
listWidth.push($(this).width());
});
document.write(listWidth);
ul {
width: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><span>Item 1</span></li>
<li><span>Longer item </span></li>
<li><span>Even longer item</span></li>
</ul>
关于javascript - 每个列表项中_text_的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40042453/