blocks|key|1398189|text|尝试：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1398190|$("#mylist+li").length|code-block|syntax|javascript|1398191|只是好奇:为什么你需要知道大小？你不能直接使用：|1398192|$("#mylist").append("<li>New+list+item</li>");|1398193|1398194|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|O|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|P|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Q|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Try:</p>

<pre><code>$("#mylist li").length
</code></pre>

<p>Just curious: why do you need to know the size?  Can't you just use:</p>

<pre><code>$("#mylist").append("&lt;li&gt;New list item&lt;/li&gt;");
</code></pre>

<p>?</p>


blocks|key|1398213|text|我认为这应该可以做到：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1398214|var+ct+=+$('#mylist').children().size();+|code-block|syntax|javascript|1398215|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I think this should do it:</p>

<pre><code>var ct = $('#mylist').children().size(); 
</code></pre>


blocks|key|1612953|text|var+listItems+=+$("#myList").children();

var+count+=+listItems.length;|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1612954|当然，您可以将其压缩为|unstyled|1612955|var+count+=+$("#myList").children().length;|1612956|要获得有关jQuery的更多帮助，http://docs.jquery.com/Main_Page是一个很好的起点。|offset|length|1612957|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.jquery.com/Main_Page^0|0|0|0|H|W|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|V|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$B|C]]|$1|I|3|J|5|F|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|F|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<pre><code>var listItems = $("#myList").children();

var count = listItems.length;
</code></pre>

<p>Of course you can condense this with</p>

<pre><code>var count = $("#myList").children().length;
</code></pre>

<p>For more help with jQuery, <a href="http://docs.jquery.com/Main_Page" rel="noreferrer">http://docs.jquery.com/Main_Page</a> is a good place to start.</p>


blocks|key|1613006|text|当调用.size()方法或.length属性时，您会得到相同的结果，但.length属性是首选的，因为它没有函数调用的开销。所以最好的方法是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1613007|$("#mylist+li").length|code-block|syntax|javascript|1613008|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You have the same result when calling .size() method or .length property   but the .length property is preferred because it doesn't have the overhead of a function call.
So the best way:</p>

<pre><code>$("#mylist li").length
</code></pre>


blocks|key|1613033|text|试一试|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1613034|$("#mylist").children().length|code-block|syntax|javascript|1613035|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>try</p>

<pre><code>$("#mylist").children().length
</code></pre>


blocks|key|1398356|text|计算列表元素个数|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1398357|alert($("#mylist+>+li").length);|code-block|syntax|javascript|1398358|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Count number of list elements</p>

<pre><code>alert($("#mylist &gt; li").length);
</code></pre>


blocks|key|1398382|text|计算列表元素数量的另一种方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1398383|​|1398384|var+num+=+$("#mylist").find("li").length;
console.log(num);|code-block|syntax|javascript|1398385|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul+id="mylist">
++<li>Element+1</li>
++<li>Element+2</li>
++<li>Element+3</li>
++<li>Element+4</li>
++<li>Element+5</li>
</ul>|1398386|1398387|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Another approach to count number of list elements:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var num = $("#mylist").find("li").length;
console.log(num);</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;ul id="mylist"&gt;
  &lt;li&gt;Element 1&lt;/li&gt;
  &lt;li&gt;Element 2&lt;/li&gt;
  &lt;li&gt;Element 3&lt;/li&gt;
  &lt;li&gt;Element 4&lt;/li&gt;
  &lt;li&gt;Element 5&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1398414|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1398415|$("button").click(function(){
++++alert($("li").length);
+});|code-block|syntax|javascript|1398416|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<!DOCTYPE+html>
<html>
<head>
<script+src="//code.jquery.com/jquery-1.11.1.min.js"></script>
++<meta+charset="utf-8">
++<title>Count+the+number+of+specific+elements</title>
</head>
<body>
<ul>
++<li>List+-+1</li>
++<li>List+-+2</li>
++<li>List+-+3</li>
</ul>
++<button>Display+the+number+of+li+elements</button>
</body>
</html>|1398417|1398418|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$("button").click(function(){
    alert($("li").length);
 });</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"&gt;&lt;/script&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script src="//code.jquery.com/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Count the number of specific elements&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;ul&gt;
  &lt;li&gt;List - 1&lt;/li&gt;
  &lt;li&gt;List - 2&lt;/li&gt;
  &lt;li&gt;List - 3&lt;/li&gt;
&lt;/ul&gt;
  &lt;button&gt;Display the number of li elements&lt;/button&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>


<p>I've got a list that is generated from some server side code, before adding extra stuff to it with jQuery I need to figure out how many items are already in it.</p>

<pre><code>&lt;ul id="mylist"&gt;
    &lt;li&gt;Element 1&lt;/li&gt;
    &lt;li&gt;Element 2&lt;/li&gt;
&lt;/ul&gt;
</code></pre>


jQuery: Count number of list elements?

服务器

jQuery

我有一个从一些服务器端代码生成的列表，在使用jQuery向它添加额外内容之前，我需要弄清楚其中已经有多少项。<ul id="mylist">    <li>Element 1</li>    <li>Element 2</li></ul>

问jQuery:计算列表元素的个数？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery:计算列表元素的个数？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery:计算列表元素的个数？
EN