Search code examples
javascriptjqueryhtmlcssclone

Calculate jQuery text().length of Visible elements without removing hidden elements


I think this is a small problem but I am stuck, somehow.

Consider the following code

HTML:

<div class="india">
   <p class="hidden"> Uttar Pradesh </p>
   <p> Andhra Pradesh </p>
   <p class="hidden"> Uttar Pradesh </p>
   <p> Andhra Pradesh </p>
</div>

CSS:

.hidden{
   display: none;
}

JAVASCRIPT:

/* Case 1: No of char inside div when hidden elements are removed
RETURNS 53 */
$('div.india').find(":hidden").remove();
alert($('div.india').text().length);

Now I want to return the same length (=53) without removing the hidden elements. I have tried doing the following things (one by one/ or on a separate similar div), but they all return different length

How can I return the same length without removing hidden elements? Explanations why they are different length are welcomed!

Link: http://jsfiddle.net/deveshz/R2QNM/1/

// Without Removing hidden div RETURNS 32
/*Case 2: */
alert($('div.india').find(":visible").text().length);

/* Case 3 */
var charlength = 0;
$('div.india').find(":visible").each(function(){
    charlength += $(this).text().length;
});
alert(charlength);

/*Case 4 RETURNS 21*/ 
var clone = $('div.india').clone();
clone.find(":hidden").remove();
alert(clone.text().length);

Solution

  • Based on the inputs of @kasper and @Richard

    I tried doing this:

    alert($('div.india').text().length - $('div.india').find(":hidden").text().length);

    and got the correct answer. Thank you for your help.

    Now this will be a great question if we can find out why clone is returning 21