在不移除隐藏元素的情况下计算可见元素的 jQuery text().length答案

【问题标题】：Calculate jQuery text().length of Visible elements without removing hidden elements在不移除隐藏元素的情况下计算可见元素的 jQuery text().length
【发布时间】：2013-10-06 11:00:46
【问题描述】：

我认为这是一个小问题，但不知何故我被卡住了。

考虑下面的代码

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

现在我想在不移除隐藏元素的情况下返回相同的长度 (=53)。我尝试过执行以下操作（一个接一个/或在单独的类似 div 上），但它们都返回不同的长度

如何在不删除隐藏元素的情况下返回相同的长度？欢迎解释为什么它们的长度不同！

链接：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);

【问题讨论】：

看起来第一个长度调用包括空格和可能的回车。 'alert($('div.india').find(":visible").text().length);'没有。尝试在长度警报之前提醒实际文本，您会看到差异

标签： javascript jquery html css clone

【解决方案1】：

这个

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

似乎给出与

相同的结果

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

当我测试它时

【讨论】：

是的，正如@kasperTaeymans 提到的。但我的问题是如何在不删除 div 的情况下获得 53 的长度。我已经明白 CASE 2 返回 div.india 中可见 p 的长度，而不是 div 本身。请帮忙

【解决方案2】：

基于@kasper 和@Richard 的输入

我试过这样做：

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

并得到正确答案。感谢您的帮助。

如果我们能找出克隆返回 21 的原因，这将是一个很好的问题

【讨论】：

@kasper：让我知道除了减法之外是否还有其他方法。

【解决方案3】：

案例一和二是不同的，因为...（见代码中的 cmets）

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

我正在考虑克隆案... :-/

编辑：删除了我的部分答案，因为我在 jsfiddle 中做错了

【讨论】：

但是我怎样才能得到 div 的计数。我的意思是 53 而不是 32 的值而不删除。不过，我理解 CASE 2 的原因！
如果是这样，为什么 alert($('div.india').text().length - $('div.india').find(":hidden").text （）。长度）;返回 53，即使这样我也没有从这里删除任何东西？请参阅下面的答案
不用担心。你能找到为什么 clone 方法会这样吗？

【解决方案4】：

我找到了为什么克隆方法会给出其他结果...

http://jsfiddle.net/kasperfish/R2QNM/3/

如果克隆元素不在 dom 中，则不能在克隆元素上使用 :visible 或 :hidden。但是，您可以检查他们是否有特定的课程。

$('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);

【讨论】：