隣接要素へのaddclass

Question

###前提・実現したいこと
はじめまして。
動的に出力されるリストの中の文字列に値に合わせて適宜CSSを当てたいと思っているのですが、なかなかうまく行きません。
ご教示いただけますと幸いです。
以下のソースをご覧くださいませ。

###該当のソースコード

<div class="item--list">
  <span class="zaiko">0</span>
  <input type="radio" value="red" name="ITEMPROPERTY_CD" id="hoge01" class="item--input">
  <label for="hoge01" class="item--label">
  </label>
</div>
・・・・・・・・・・・
<div class="item--list">
  <span class="zaiko">23</span>
  <input type="radio" value="blue" name="ITEMPROPERTY_CD" id="hoge22" class="item--input">
  <label for="hoge22" class="item--label">
  </label>
</div>

やりたいこととしては、
span.zaikoの値が0のとき、該当するinput .item--input にdisabled
span.zaikoの値が0のとき、該当するlabel .item--label にitem--label--disabled というClassを追加挿入

###最後に
隣接するものに適用と言うのが難しく手間取っております。よろしくお願いします。

###追記
隣接という言葉自体に誤りが有りましたことお詫びします。
性格には一番近いものになりますね。

Comments

[kei344]

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[h1klbtm]

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

Answer 1

隣接しているわけじゃなく、次に出てくるセレクタですよね？

$(function(){
  $('.zaiko').each(function(){
    $(this).nextAll('.item--input').first().prop('disabled',$(this).html()=="0");
    $(this).nextAll('.item--label').first().addClass('item--label--disabled ');
  });
});

Comments

[h1klbtm]

望んでいたものにかなり近い状態になりました!素晴らしいです。
ただlabelのdisabledが他のlabelにも適用されてしまうのはなんとかしてみます。。

本当に有難うございました。

Answer 2

jQueryなら$(セレクタ).next().addClass('hoge')で隣接する要素にclassを与えることはできます。
ただ、トラベリングで組んでしまうとDOM変更で「隣」でなくなってしまった場合にはプログラムが動かなくなってしまうので、class名等で制御できるようにしておいた方が後々楽かな、という気がします。