{"id":648,"date":"2023-08-25T17:22:51","date_gmt":"2023-08-25T17:22:51","guid":{"rendered":"\/\/api.jquery.com\/?p=648"},"modified":"2024-04-20T18:07:42","modified_gmt":"2024-04-20T18:07:42","slug":"size","status":"publish","type":"post","link":"https:\/\/api.jquery.com\/size\/","title":{"rendered":".size()"},"content":{"rendered":"<article id=\"size1\" class=\"entry method\"><h2 class=\"section-title\">\n<span class=\"name\">.size()<\/span><span class=\"returns\">Returns: <a href=\"http:\/\/api.jquery.com\/Types\/#Integer\">Integer<\/a><\/span><span class=\"version-details\">version deprecated: <a href=\"\/category\/version\/1.8\/\">1.8<\/a>, removed: <a href=\"\/category\/version\/3.0\/\">3.0<\/a><\/span>\n<\/h2>\n<div class=\"entry-wrapper\">\n<p class=\"desc\"><strong>Description: <\/strong>Return the number of elements in the jQuery object.<\/p>\n<ul class=\"signatures\"><li class=\"signature\">\n<h4 class=\"name\">\n<span class=\"version-details\">version added: <a href=\"\/category\/version\/1.0\/\">1.0<\/a><\/span><a id=\"size\" href=\"#size\"><span class=\"icon-link\"><\/span>.size()<\/a>\n<\/h4>\n<ul><li><div class=\"null-signature\">This method does not accept any arguments.<\/div><\/li><\/ul>\n<\/li><\/ul>\n<div class=\"longdesc\" id=\"entry-longdesc\">\n    <div class=\"warning\">\n      <p>Note: This method has been removed in jQuery 3.0. Use the <code><a href=\"\/length\/\">.length<\/a><\/code> property instead.<\/p>\n    <\/div>\n\n    <p>The <code>.size()<\/code> method is functionally equivalent to the <code><a href=\"\/length\/\">.length<\/a><\/code> property; however, <strong>the <code>.length<\/code> property is preferred<\/strong> because it does not have the overhead of a function call.<\/p>\n    <p>Given a simple unordered list on the page:<\/p>\n    <div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>foo<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>bar<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n    <p>Both <code>.size()<\/code> and <code>.length<\/code> identify the number of items:<\/p>\n    <div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>alert( <span class=\"hljs-string\">\"Size: \"<\/span> + $( <span class=\"hljs-string\">\"li\"<\/span> ).size() );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>alert( <span class=\"hljs-string\">\"Size: \"<\/span> + $( <span class=\"hljs-string\">\"li\"<\/span> ).length );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n    <p>This results in two alerts:<\/p>\n    <p>\n      <samp>Size: 2<\/samp>\n    <\/p>\n    <p>\n      <samp>Size: 2<\/samp>\n    <\/p>\n  <\/div>\n<section class=\"entry-examples\" id=\"entry-examples\"><header><h2>Example:<\/h2><\/header><div class=\"entry-example\" id=\"example-0\">\n<p>Count the divs.<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n6\">6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n7\">7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n8\">8<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n9\">9<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-built_in\">document<\/span>.body )<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  .on( <span class=\"hljs-string\">\"click\"<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    $( <span class=\"hljs-built_in\">this<\/span> ).append( $( <span class=\"hljs-string\">\"&lt;div&gt;\"<\/span> ) );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-keyword\">var<\/span> n = $( <span class=\"hljs-string\">\"div\"<\/span> ).size();<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    $( <span class=\"hljs-string\">\"span\"<\/span> ).text( <span class=\"hljs-string\">\"There are \"<\/span> + n + <span class=\"hljs-string\">\" divs. Click to add more.\"<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  } )<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-comment\">\/\/ Trigger the click to start<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  .trigger( <span class=\"hljs-string\">\"click\"<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div><\/section>\n<\/div><\/article>","protected":false},"excerpt":{"rendered":"<p>Return the number of elements in the jQuery object.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,55,61,78],"tags":[],"class_list":["post-648","post","type-post","status-publish","format-standard","hentry","category-deprecated-18","category-dom-element-methods","category-removed","category-78"],"_links":{"self":[{"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/posts\/648","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/comments?post=648"}],"version-history":[{"count":2,"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/posts\/648\/revisions"}],"predecessor-version":[{"id":1024,"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/posts\/648\/revisions\/1024"}],"wp:attachment":[{"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/media?parent=648"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/categories?post=648"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/tags?post=648"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}