4

次のようなhtmlがあるとしましょう：

<div id="content">Foo<span style='display:none'>hidden</span>Bar</div>

実際には、これはより複雑で、Angular の使用ng-hideなどによって生成されます。contentユーザーに表示される divからすべてのテキストを取得する必要があります。この場合、私は取得したいと思いますFooBar。

$('#content').text()私が見つけた最も近いものですがFoohiddenBar、この場合はそれが私に与えられます。div の目に見える内容だけを取得する良い方法はありますか? text()非表示の要素をスキップする機能が本当に必要です。

4

3 に答える 3

9

クローンを作成し、DOM に追加し (slindberg が指摘したように)、非表示の要素をすべて削除してから、テキストを取得します。

var clone = $('#content').clone();

clone.appendTo('body').find(':hidden').remove();

var text = clone.text();

clone.remove();

フィドル

于 2013-07-19T19:37:43.873 に答える
5

残念ながら、@adeneo の回答はほとんどの場合うまくいきません。クローンを作成すると、定義上、子が表示されない (ドキュメントに添付されていない) ドキュメント フラグメントが作成され、.text()呼び出される前にすべて削除されるためです。これは、要素の子のテキストが結果に含まれないことを意味します。

これを行うために私が見つけた唯一の方法は、視覚的に隠れたノードを省略して、実際にすべてのノードを上から下にトラバースすることです。幸いなことに、これはかなり簡潔なプラグインで表現できます。

jQuery.fn.visibleText = function() {
  return $.map(this.contents(), function(el) {
    if (el.nodeType === 3) {
      return $(el).text();
    }
    if ($(el).is(':visible')) {
      return $(el).visibleText();
    }
  }).join('');
};

このプラグインは、セレクターのルート要素がテキスト ノードではないことを想定していることに注意してください (ほとんどの場合、そうではありません)。また、IE8 をサポートする必要がない場合は、$(el).text()に置き換えることができることに注意してください。el.textContent

JSFiddle

于 2014-03-19T21:41:37.613 に答える