javascriptの「length>」を特定のタイミングで判定する方法

クラス「.wpuf-success」が出現したタイミングで、
クラス「.kakurete」を非表示にしたいです。

そのために次のように書いてみたのですが、、

javascript
1<script>
2$(function(){
3$(document).on('ready',function(){
4    if ( jQuery( 'body .wpuf-success' ).length > 0 ) {
5      jQuery( '.kakurete' ).hide();
6    }
7});
8})(jQuery);
9</script>

実はこの「.wpuf-success」というクラスは、プラグイン「WP User Frontend」によって、

ユーザーが記事を投稿したタイミングで出現する

というクラスなのです。

そのせいか、上の書き方では「.kakurero」が隠れてくれません。

どなたかうまいタイミングで適用させられるような方法をご教示いただませんでしょうか？

どうぞ宜しくお願い致します。

プラグイン本家ページ（https://ja.wordpress.org/plugins/wp-user-frontend/）

プラグイン紹介ブログ（http://www.hp-fuzy.com/?p=354）

p.s.
一度Wordpressのフォーラムで質問したところ、javascriptは畑違いだとのご指摘を受け、こちらから再度質問させて頂きました。

行動規範の内容に同意します

回答2件

ベストアンサー

MutationObserverを用いてDOMに対する変更(今回はclass属性)を監視すればよいでしょう.

以下は, body要素配下に「someClassクラスを持つノードが発生した」ことを検知するためのサンプルです.

JavaScript
1const observer = new MutationObserver(recs => {
2	const hasClass = node => node.classList.contains("someClass");
3	recs.some(rec => {
4		switch(rec.type){
5			case "attributes":
6				if(!hasClass(rec.target)){
7					return false;
8				}
9				break;
10			case "childList":
11				if(![].find.call(rec.addedNodes, 
12					node => node instanceof Element && hasClass(node)
13				)){
14					return false;
15				}
16				break;
17		}
18		//classが追加された際の処理
19		console.log("added");
20
21		return true;
22	});
23});
24observer.observe(document.body, {
25	subtree: true,
26	childList: true,
27	attributes: true,
28	attributeFilter: ["class"]
29});

一応これで対処できますが, 監視対象の範囲が広すぎるとスクリプトの動作パフォーマンスに影響します. プラグインがクラス.wpuf-successを設定しうるノード範囲, 及びその動作シチュエーション(class属性の変更のみか, ノードの追加があるか)を特定し, その部分だけを監視するようにすべきでしょう.

NOTE:
とは言え, この方法は余りに場当たり的な対処に思えてなりません. 「ユーザーが記事を投稿した後に何らかの処理を行いたい」という要件は普遍的に存在するはずなので, プラグインの使い方に見落としが無いかもう一度確認して下さい.

投稿2018/02/07 08:02