在输出到 HTML 之前计算数据中的列表项

Question

我有一个使用 ajax 返回的列表，看起来像这样......

console.log(data);

<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>

我将它插入到这样的 HTML 元素中......

$("#output").html(data);

这工作正常，但我想在将其输出到元素之前计算列表项的数量。 我已经尝试了以下但它只给了我字符数......

console.log(data.length);

我哪里错了？ 在输出 HTML 之前有没有办法做到这一点？

Answer 1

您的数据只是一个字符串，因此您可以使用 jQuery 将其转换为 jquery 对象，然后从该对象中选择li元素并获取长度。

 const data = '<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>' const html = $(data); console.log(html.find('li').length) $("#output").html(html);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="output"></div>