jQueryにて先祖要素内にある特定の要素にクラスを追加したい

Question

ページ内に複数あるinput要素それぞれにある特定のクラスをつけている場合に、disabledを付与し挙動を無効化して
さらに、その要素の先祖にある特定のクラスに追加でクラスを付与したく思っております。

試したコードは以下になります。

<tr>
  <th>aaa</th>
  <td>
   <div class="set-radio">
    <span class="set-radio__inner">
      <label>
        <input type="radio" name="seminar" value="seminar1" class="set-input-radio -no-set">
        <span class="set-input-mark -radio-left"></span>
        <span class="set-radio-txt">あり</span>
      </label>
    </span>
   </div>
  </td>
...

$(function(){
	if($(".-no-set").prop('disabled', true)){
		$(this).parents().find(".set-radio").addClass("no-active")
	}
});

上記コードで、table内のtd要素の中にある「.set-radio」に、「no-active」クラスを付与したいのですが、
追加されません。各trの中にset-radioクラスがあり、それぞれのtrで個別に付与したい状況ですが、
解決まで至りません。

初歩的なところで申し訳ありませんが、
もし方法をご存知の方がいらっしゃいましたらお力をお貸しいただけないでしょうか。
どうぞよろしくお願いいたします。

Answer 1

parents()だとすべての祖先を遡ります。documentまで。それにfindするのですからすべて対象になります。parentsの引数にセレクタを設定して対象を絞ってください。

$(function(){
    $(".-no-set").prop('disabled', true).parents(".set-radio").addClass("no-active");
});

.set-radio が一つだけなら、直近の祖先を探すclosestでいいでしょう。

$(function(){
    $(".-no-set").prop('disabled', true).closest(".set-radio").addClass("no-active");
});

Comments

[Yui_note]

ありがとうございます！！closestの方でやりたい事ができました！
parents()は全ての先祖を遡るんですね、
全ての先祖というのは親要素内にて全てを遡るものだと勝手に思っていたのですが、
ページ内全てになるんですね。なるほどです。。
また1つ勉強になりました。

本当に本当に助かりました。。
ありがとうございました。m 引き続き勉強に精進します。

[hatena19]

ちょっと誤解しているかも。
「全ての先祖というのは親要素内にて全てを遡る」という理解であってます。（≠ページ内全て）
一つの上の親でfind、さらにその上の親でfind、・・・最終的にdocumentでfind というように祖先すべてでfindするので、ページ内全てが対象になってしまうということです。
findは子要素全てを対象に検索しますので。

[Yui_note]

追加コメントありがとうございます！
そうですね、自分でも上の文章を書いた後になんかおかしいなと思いました。。
結局の所、親要素→親要素と遡っていくとbodyまで遡って行くので、
ページ内全てをfindすることになりますよね。。
今回は、closestの使用で直近の先祖を探すというところと、
ifを使わない書き方のところが自分ではできなかったので、
もう一度いただいたコードを見直したいと思います。
すみません、、ありがとうございました。。m

Answer 2

現状のthisが指しているのは$(function(){がトリガーとなっているのでdocument自身になっています。

    if($(".-no-set").prop('disabled', true)){
    	console.log($(this))

そのまま指定すれば良いのでは。

$(".-no-set").parents().find(".set-radio").addClass("no-active")

実行結果のHTML

Comments

[Yui_note]

アドバイスいただきありがとうございます！
どこがトリガーになっているのかという事があるんですね..初めて知りました。
ありがとうございます。。

いただいたコードを試してみましたところ、確かにクラスは付与されるのですが、
set-radioクラスがある要素全てにno-activeクラスが付与されている状態です。

只今HTMLのコードを少し修正させていただいたのですが、
実際にはtableタグ内で使用しておりまして、各trのtd内にset-radio要素がありまして
そちらの中だけで適用させたいと思っております。

$('table tr td').each(function(index) {
$(".-no-set").parents().find(".set-radio").addClass("no-active")
});

上記のコードで試してみましたが、まだページ内全てのset-radioにクラスが付与されてしまいます。
こういった場合には、どの様にしたらよろしいでしょうか・・。

何度も申し訳ございませんが、ぜひお力をお貸しいただきたいです。
どうぞよろしくお願いいたします。m

[m.ts10806]

「-no-set」クラスが付与されている　クラスが基準ですよね？

[m.ts10806]

全体のHTML構造次第だと思います。
子から親を辿るより親から子を頼ったほうがいいかもしれません。
hasClass()を組み合わせると良いかもしれません。

[Yui_note]

ご返信ありがとうございます。
はい、「-no-set」クラスとdisabledを付与している要素が基準になります。

[Yui_note]

ありがとうございます！
アドバイスを元にもう少しトライしてみます。