javascript - 每个列表项中_text_的宽度

Question

最好的方法是什么？我尝试过:

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;
}

但它只是返回所有相同的宽度，这也是实际列表项的宽度，而不是文本的宽度。

编辑:我想要文本的宽度(以像素为单位)。不是列表本身宽度的字符数

Answer 1

将文本包裹在 <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>