Javascriptでページ内の任意クラスを非表示

解決済

質問者：ok-rjak
質問日時：2011/05/27 11:26
回答数：3件

Javascriptで、ページ内に点在する任意のクラスを非表示にしたいと思います。
こんなことが可能でしょうか？

条件：
１．class="text"というspanなりdivなりがページ内に複数存在します。指定しているスタイルはフォントサイズやフォントカラーです。

２．そのクラスが指定された要素の中で、テキストで「非表示」となっている要素のみ非表示にしたいと思います。
　例：<span class="text">非表示にしたい</span>、<div class="text">これは非表示です</div>
　このように「非表示」という文字が含まれています。

３．「非表示」というテキストが含まれている要素にはclass="text"以外にclassもidもふられていないです。

４．jQueryやJavascriptは使えますが、あらかじめ指定要素にidやclassを付加しておくということができません。何らかの方法でページ読み込み後に検索し、探し出さないといけないのです。

案：
素人の私が考えた方法では、「非表示」という文字がマッチする「class="text"」要素を何らかの方法で検索し、その要素に対して「id="hide"」などを追加して、そのidを非表示処理するという方法です。

上記案をコード化できますか？
また、ほかにもっと簡潔にできるよという方法はありますか？

かなりの無理難題のような気がしますが、もしできるようであればよろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： fujillin
回答日時：2011/05/27 13:35

＞そのクラスが指定された要素の中で～～

が、どこまでの範囲を指しているのかわかりませんがご参考までのネタとして。
（あとは適当に作り直してください。インデントは全角空白になっています）

(function(){
　var f = window.onload;
　window.onload = function(){
　　if(f) f();
　　var i, e, t, n, elms = document.body.getElementsByTagName("*");
　　for(i=0; e=elms[i++];){
　　　if((n=e.className) && n.match(/\btext\b/))
　　　　if((((t=e.textContent) || t!==undefined)?t:e.innerText).indexOf("非表示")>-1)
　　　　　e.style.display = "none";
　　}
　}
})();

* これ（↑）だと
　<a href="～" class="text">非<span>表示</span>～～
なんてのは対象になるけれど
　<a href="～" class="text">非
　<span>表示</span>～～
だと対象にならないとかになるけれど、どんなのが良いのかわからないので意図に応じてご修正を。
（多分、jQueryで書けばもっと簡略になることでしょう）

- 0
- 件

通報する

この回答へのお礼

思ったような挙動になりました！
こちらを使わせていただこうと思います。

ありがとうございました。

通報する

お礼日時：2011/06/17 12:10

No.3

回答者： babu_baboo
回答日時：2011/05/29 17:14

ふぁいあ～ほっくすなら、うごくよ。

<!DOCTYPE html>
<title></title>

<style type="text/css">
*[aria-hidden="true"] { display: none; }

.hide {
　display : none;
}
</style>

<p class="text">非表示1</p>
<p class="text">表示2</p>
<p class="text">非表示3</p>

<script type="application/javascript; version=1.8">

var hoge0 =
　(function (isInsideText)
　　(function (target, text, addClass)
　　　Array.forEach (document.getElementsByClassName (target), function (e)
　　　　(isInsideText.call(e.textContent, text))
　　　　? e.setAttribute('aria-hidden', 'true')
　　　　: null)))
　　(function (text) -1 < this.indexOf (text));

hoge0 ('text', '非表示');

var hoge1 =
　(function (isInsideText)
　　(function (target, text, addClass)
　　　Array.forEach (document.getElementsByClassName (target), function (e)
　　　　(isInsideText.call(e.textContent, text))
　　　　? e.classList.add (addClass)
　　　　: null)))
　　(function (text) -1 < this.indexOf (text));

//hoge1 ('text', '非表示', 'hide');

var hoge2 =
　(function (target, reg, addClass)
　　Array.forEach (target,
　　　(function (e)
　　　　(reg.test (e.textContent))
　　　　? e.classList.add (addClass)
　　　　: null)));

//hoge2 (document.getElementsByClassName ('text'), /非表示/, 'hide');
</script>