如何检查有关display:none style的文本内容

时间:2015-03-10 11:50:34

标签: javascript jquery unit-testing dom angularjs-directive

我想获取DOM节点的文本内容,但没有有效隐藏的元素(具有样式display:none)。

我知道DOM textContent属性和jQuery的text()方法(我认为它总是使用textContent),但它不尊重display:none

var div = $("<div><span style='display:none'>not </span>good</div>");
var text = div.text(); // "not good"
var textContent = div[0].textContent; // "not good"

如何从该div中获取"good"内容?

我需要这个单元测试我的AngularJS指令。我正在使用Jasmine编写测试,我的测试类似于:

    it('should check text ignoring hidden content', function() {
      $rootScope.hidden = true;
      var template = '<div><span ng-hide="hidden">not </span>good<div>';
      var element = $compile(template)($rootScope);
      $rootScope.$digest();

      console.debug(element.html());    // prints: '<span class="ng-hide" ng-hide="hidden">not </span>good<div></div>'
      console.debug(element.text());    // prints: 'not good'
      expect(element.text()).toEqual('good');   // oops, that fails :(
});

在我的真实测试中,我想测试我的自定义指令而不是ng-hide,但实际的指令对于这个问题是无关紧要的。

我对Jasmine和Javascript单元测试完全不熟悉,所以如果不是这样的话,请告诉我。

6 个答案:

答案 0 :(得分:1)

需要记住的一些注意事项:您可以使用clone()来避免修改原始对象,但要使用:visible,元素必须实际位于DOM中。

&#13;
&#13;
var sample = $("<div><span style='display:none'>not </span>good <div>content</div></div>");
var t = sample.clone();
$('body').append(t);
t.find('*:not(:visible)').remove();
t.remove();
alert(t.text());
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

如果你为你的风格申请一个类,比如.noDisplay {display:none;你可以做div.find('span.noDisplay')之类的东西.remove();用jQuery

答案 2 :(得分:0)

尝试以下方法。 它只会获得&#34; Visible&#34;跨越。

&#13;
&#13;
  
  
  var text="";
   $("#content-div").find('span:visible').each(function(){         
       text=text+' '+$(this).text();         
   });
  
  alert(text);
  
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="content-div"><span >ok</span> <span style="display:none">hidden</span></div>
&#13;
&#13;
&#13;

答案 3 :(得分:0)

试试这个

 $('div').find('span').text("").parent().text();

答案 4 :(得分:-1)

您可以使用jquery remove()函数并应用于div children元素。

div.children().remove();之后立即添加var div = $("<div><span style='display:none'>not </span>good</div>");,您将只获得“好”的内容

答案 5 :(得分:-1)

我想你需要过滤内容,你应该定位为TEXT_NODE分配的nodeType = 3

var div = $("<div><span style='display:none'>not </span>good</div>");
   
var textContent = div.contents().filter(function() {
  return this.nodeType == 3;
}).get(0).textContent; // "good"

$('body').html(textContent); // logs "good"
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>