Click here to check my latest exciting videos on youtube
Search Mallstuffs

Flag Counter
Spirituality, Knowledge and Entertainment


Locations of visitors to this page


Latest Articles


Move to top
Ge the total number of HTML elements in a page
Posted By Sarin on Feb 03, 2013     RSS Feeds     Latest Hinduism news
4194 Views

Often there is a need to find out the total number of instances of a particular HTML tag. For example, my requirement may be to find out the total number of paragraph element in a page and if the total number of paragraph element is 2, than there would be some custom logic to execute. We can do this very easily using a chunk of JQuery code.
JQuery has an inbuilt method called size which let you find out the number of instances of a particular HTML element. For example, below JQuery code will replace the HTML content of all paragraph elements with a custom message which will print out the number of paragraph element in a page.
$('p'). html('There are ' + $('p').size() + ' link(s) on this page.');

I can also filter out the HTML element. For example, below JQuery code will replace the HTML content of all paragraph elements with id not equal to 'pTitle' by the number of instances of paragraph element having title equal to ‘Ra’.
$('p').not(document.getElementById('pTitle')).html('There are ' + $('p[title=Ra]').size() + ' link(s) on this page.');

The same functionality can be achieved as
  $('p[id != "pTitle"]').html('There are ' + $('p[title=Ra]').size() + ' link(s) on this page.');

Demo:
In my demo, I have declared few paragraph elements and one button. On click of the button, I would replace the HTML content of all paragraph elements with id not equal to pTitle by the number of instances of paragraph elements with title equal to ‘Ra’. Below is the HTML code.
HTML
<input id="first" type="button" value="first" /> 
<div>
<strong>Hare Rama</strong>
  
<p title="Ra" id="pTitle">Hare Rama</p>
<p>Rama Rama</p>
</div>
   
 Jquery

  $(document).ready(function ()  {
                $('#first').click(function ()  {
                    $('p[id != "pTitle"]').html('There are ' + $('p[title=Ra]').size() + ' link(s) on this page.');
  
                });
            });
Output:
On executing the above code, I get the output as:

As shown above, on the click of the button, the HTML content of the paragraph element having title not equal to pTitle got changed.  
  
Note: Images used on this website are either a production of Bhaktivedanta Book Trust(https://www.krishna.com), Iskcon Foundation or were found in google search under "Free to use and share". If any of the images presented here violates copyright issues or infringes anyone copyright or are not under "Fair use", then please bring it to our notice. Read Disclaimer for more.

Share this to your friends. One of your friend is waiting for your share.
Related Articles
Calling web service asynchronously using jquery ajax
Science in Hinduism-Gravitational force and repulsive force
Changing Grid View header and footer at run time
Generation and use of electricity in vedic era
Changing CSS Properties of HTML element using JQuery
Ge the total number of HTML elements in a page
Playing with HTML using Jquery
Working with forms-Jquery form selector
Trigger custom or manual postback in ASP.NET

Post Comment