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 weled!

Link: /

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

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 weled!

Link: http://jsfiddle/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);

• javascript
• jquery
• html
• css
• clone

• looks like the first length call includes spaces and possibly carriage returns. The 'alert($('div.india').find(":visible").text().length);' doesnt. Try alerting the actuall text before the length alerts and you will see the difference – Richard Banks Commented Sep 30, 2013 at 14:29

4 Answers 4

this

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

seems to give the same result as

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

when i tested it

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

case one and two are different because... (see ments in code)

    //Case 1: No of char inside div when hidden elements are removed
    RETURNS 53 */
    $('div.india').find(":hidden").remove();
    alert($('div.india').text().length);//here your selector is a div
    alert($('div.india p').text().length);//here it is a p tag... ->32



    // Without Removing hidden div RETURNS 32
    /*Case 2: */
    alert($('div.newindia').find(":visible").text().length);//here your selector points to a visible p tag

I'm thinking about the clone case... :-/

edit:removed part of my answer because i did something wrong in jsfiddle

I found why the clone method gives an other result...

http://jsfiddle/kasperfish/R2QNM/3/

you can't use :visible or :hidden on a clone element if it is not in the dom. However you could check if they have a particular class or not.

$('div.india').find(":hidden").remove();
alert('not clone '+$('div.india').text().length);


var clone = $('div.newindia').clone();

alert('clone '+ clone.find("p:not(.hidden)").text().length);