计算 jQuery text().Length of Visible 元素而不删除隐藏元素
Calculate jQuery text().length of Visible elements without removing hidden elements
我认为这是一个小问题,但不知何故,我被卡住了。
请考虑以下代码
.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);
这个
$('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());
当我测试它时
基于 @kasper 和 @Richard 的输入
我尝试这样做:
alert($('div.india').text().length - $('div.india').find(":hidden").text().length);
并得到了正确的答案。谢谢你的帮助。
现在这将是一个很好的问题,如果我们能找出为什么克隆返回 21
情况一和情况二是不同的,因为...(请参阅代码中的注释)
//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中做错了什么
我发现了为什么克隆方法会给出其他结果......
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);
相关文章:
- 删除对HTML元素的拖动
- 如何覆盖锚点元素's href目标,并在我点击转到目标javascript时删除其他错误
- 从所有元素中删除HTML5验证
- 如何检查元素的内容是否为空,如果为空,请在jquery中删除该元素
- 从组件状态的数组中删除元素
- angularjs删除动态形式元素中的特殊字符
- Mongoose-在更新中删除数组元素
- 从数组中删除元素的最佳方法是:javascript/jquery
- 删除不起作用的父元素和所有子元素
- 一些元素没有从数组中删除
- 正在尝试删除子元素的最后一个子元素
- JavaScript-如何按类查找元素并删除此类
- 正则表达式条件来删除元素
- Small Javascript从动态表单中删除多个元素的问题
- javascript:在元素删除后停止setInterval
- JQUERY:动态 AJAX 和 html 元素删除
- AngularJS ngRepeat元素删除
- AngularJS & lt; select>使用ng-model和ng-options在元素删除时被破坏
- jQuery UI datetimepicker绑定到错误的输入后DOM元素删除
- 防止 jQuery 在元素删除时取消绑定事件