jquery 如何检查文本内容是否符合display：none样式

ikfrs5lh 于 2023-10-17 发布在 jQuery

关注(0)|答案(7)|浏览(133)

我想得到一个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单元测试完全陌生，所以如果这不是正确的方法，请告诉我。

jquery

来源：https://stackoverflow.com/questions/28962995/how-can-i-check-text-content-with-respect-to-displaynone-style

7条答案

按热度按时间

kiayqfof1#

需要记住的几点注意事项：你可以使用clone()来避免修改原始对象，但是要使用:visible，元素必须实际上在DOM中。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

赞(0）回复(0）举报 2023-10-17

wvmv3b1j2#

如果为样式应用类，如.noDisplay { display：none;}你可以做类似div.find（'span. noDisplay'）.remove（）的事情;使用jQuery

赞(0）回复(0）举报 2023-10-17

daupos2t3#

尝试以下操作。它将只获取“可见”跨度的文本。

var text="";
   $("#content-div").find('span:visible').each(function(){         
       text=text+' '+$(this).text();         
   });
  
  alert(text);

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

赞(0）回复(0）举报 2023-10-17

v440hwme4#

试试这个

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

赞(0）回复(0）举报 2023-10-17

fivyi3re5#

有趣的是，没有人提到另一个属性innerText，它“知道样式，不会返回“隐藏”元素的文本”（https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent）。只需将textContent替换为innerText，就可以完成一行修复。

赞(0）回复(0）举报 2023-10-17

cngwdvgl6#

你可以使用jquery remove()函数并应用于div子元素。
在var div = $("<div><span style='display:none'>not </span>good</div>");之后添加div.children().remove();，您将只获得“好”内容

赞(0）回复(0）举报 2023-10-17

omhiaaxx7#

我猜你需要过滤内容，你应该针对nodeType = 3，它被分配给TEXT_NODE。

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>

赞(0）回复(0）举报 2023-10-17

我来回答

jquery 如何检查文本内容是否符合display：none样式

7条答案

相关问题

热门标签

最新问答