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);
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