-
ID:y.Rai2 さんの質問

jQueryで質問です。
下記のソースのようにページ内すべてのulの中の最初のliに.activeが入った時に、たとえばアラートを出したい。といった場合はどのように監視したらいいのでしょうか?
クラスが一個でも外れた場合はまた別の処理をしたいです。

ラジオボタンの監視のような物イメージしているのですが、、、
-------------------------------------------------------------------
<ul>
<li class="active"></li>
<li></li>
<li></li>
</ul>

<ul>
<li class="active"></li>
<li></li>
<li></li>
</ul>

<ul>
<li class="active"></li>
<li></li>
<li></li>
</ul>
-------------------------------------------------------------------

みんなの回答 4 件

ID:ARi94I さんの回答

$(’li’).lengthと$(’li.active’).lengthでそれぞれの数を調べておいて、一致したらアラート出すとか。

ID:y.Rai2

シンプルでわかりやすいです。
「最初のli」以外のliもlengthの影響を受けてしまうようのでこのままだとちょっとアレですが考える上での参考になりました。
ありがとうございます。

ID:E4nNG. さんの回答

いつどこで変更されるのか不明ならMutationObserverのobserveを使うのが正攻法かと思います。
クラスの変更も自前のJSで行うなら、トリガーでアラートを発火させればいいと思うけど。

ID:.CuksH

全くもってその通りですが、なぜトピ主さんはこのコメントを無視しているのでしょう。
jQueryというもので、「classが変更された時」というイベントの取り方はできません。誰もが一度悩む問題です。そこでMutationObserverに行き着き試します。最後はjQueryじゃダメだ、となり、DOMをいじることをやめます。

ID:.oAOh. さんの回答

最初のliに.activeが入った時 というのをどうやって実装しているかによる

ID:y.Rai2

イメージとしては、タブのulが三つあってすべて最初のタブを選択されたら、別の場所で項目の表示非表示をしたい感じです。
なので監視という意味ではタブをクリックされるたびに最初のliにactiveが入っているのか確認するといった感じです。

ID:xAncSb さんの回答

var a = $(’ul > li’).eq(0).length,
b = $(’ul’).length;
if(a == b) alert(’hage’);
.
これでいけんじゃね?

ID:xAncSb

classの判定入れてなかったわ。
あとeqだと要素集合だからマッチしないね。
.
var a = $(’ul > li.active:first-child’).length,
b = $(’ul’).length;
if(a == b) alert(’hage’);

ID:6MOREi

そういう方向でよければ、これで十分かも。
var flg = Boolean($("li:not(.active)","ul").get(0));

ID:6MOREi

別にjQuery要らない説も併せてどうぞ
var flg = Boolean(document.querySelector(’ul>:not(.active)’));

ID:E4nNG.

どれも監視してなくね?

ID:ARi94I

監視について、前提としてactiveが入る/消すはコメ主ができるという話だと思うし、入る消すのタイミングで判定してやればいいはず。監視し続ける理由はないと思うが。

ID:y.Rai2

js詳しくないのですみません。
ただlengthを使用した実装が今の自分にはわかりやすと感じました。

最終更新日:2016-12-12 (1,456 views)

関連するトピックス

ページ上部に戻る