Question

我有javascript代码测试div是否有一些非空白文本内容。

这有效，但它无法区分div中的文本内容或样式标记声明，并且当没有文本内容而是带有css数据的样式标记时，测试失败。

问题是如何在忽略样式标记的同时测试空文本内容？

HTML：

<div id='test1'>
    <div>   </div>
</div>

<div id='test2'>
    <div>   </div>

<style>
.style1{
    border:1px;    
}        
</style>    

</div>

使用Javascript：

// Works
if($('#test1').text().trim().length==0){
    alert('test1 has no content!');
}    

// Does not work due to style1 declaration within style tag within div
if($('#test2').text().trim().length==0){
    alert('test2 has no content!');
}

测试网址： http://jsfiddle.net/sLDWB/

Answer 1

一种选择是克隆元素并删除style标记：

$.fn.isTextless = function() {
   var txt = this.first()
                 .clone()
                 .find('style')
                 .remove()
                 .end()
                 .text();

   return $.trim(txt).length === 0; 
}

if ( $('#test2').isTextless() ) {
    alert('test2 has no content!');
}

http://jsfiddle.net/5Z3M4/

Answer 2

您可以为需要检查的所有元素使用公共类，使用each遍历它们，存储初始HTML，删除样式标记，检查并恢复初始HTML。像这样：

$('.testdiv').each(function() {
    var divHtml = $(this).html();
    $(this).find('style').remove();

    if($(this).text().trim().length==0){
        alert( $(this).attr('id') + ' has no content!');
    } 
    $(this).html(divHtml);
});

http://jsfiddle.net/sLDWB/1/

Answer 3

Subtract style标记的长度与实际长度。

尝试，

if($('#test1').text().trim().length==0){
    alert('test1 has no content!');
}    

if($('#test2').text().trim().length - $('#test2 style').text().trim().length ==0){
    alert('test2 has no content!');
}

DEMO

Answer 4

使用以下javascript代码

document.getElementById('test2').innerText

Answer 5

样式标记应该放在页面的头部。如果没有元素使用.style1，为什么你在那里style1？如果要更改div的样式，请执行<div style="border: 1px;">或在HTML页面的<head>部分中进行样式声明。

简而言之，您不应该在<style>之外添加<head>标记。

jQuery在元素中获取文本但忽略样式标记

5 个答案:

DEMO