

次のようなHTMLがあります。

[code]

    <div class="td">
      <i class="fa fa-hoge"></i>
      <div class="piyo">
        <span class="name">田中田中</span>
        <div class="radio">
          <div class="r-radio">
            <input id="radio-1" name="hogehoge" type="radio" value="true" />
            <label for="radio-1">true</label>
          </div>
          <div class="r-radio">
            <input id="radio-2" name="hogehoge" type="radio" value="false" />
            <label for="radio-2">false</label>
          </div>
        </div>
      </div>
    </div>
    
[/code]

こちらにおいて現在、radioボタンを押した後に発火したイベントを取得し、

this の中身は

`<input id="radio-1" name="hogehoge" type="radio" value="true" />`

のnodeになっております。

このthisの状況から、 `<i class="fa fa-hoge"></i>` を取得したいのですが、

`this.closest("i")` としても取得できませんでした。  
`this.find("i")` でもダメでした。

this.parentElementを繰り返せば、取得はできるのですが、可読性に問題があるため、できれば避けたいです。

新しいセレクタを作成してというのも考えられるのですが、  
この td があと20個ほどありますため、現在のノードから、近いところの `i` を取得したいと考えております。

どのようにすれば実装できるのかわからず、困っております。  
よろしくお願いします。


CC BY-SA 3.0
2016-12-13T12:43:29.790
31121
2016-12-13T14:39:32.433
13175
question
javascript jquery
現在のノードから近い要素を取得しようとした際に、this.closest("i") としても取得できず困っております。


あなたが提示されたHTMLの構造では、`i`要素はラジオボタンの親/先祖要素ではないので、`closest`や`parentElement`の繰り返しでは取得できないのではないかと思われます。

`i`要素のもう1階層親の要素まで遡れば、`i`要素とラジオボタンの共通の先祖要素にたどり着くので、そこからまた子要素方向にたどれば良いのではないかと思います。

`$radio`にはラジオボタンのjQuery要素が入っているとして、こんなコードを書けば所望の動作になるだろうと思います。

[code]

    var $radio = $('input:radio[name=hogehoge]');  //<-実際には`$(this)`?
    var $i = $radio.closest('div.td').children('i');
    $i.text($radio.val());
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    
    <div class="td">
      <i class="fa fa-hoge"></i>
      <div class="piyo">
        <span class="name">田中田中</span>
        <div class="radio">
          <div class="r-radio">
            <input id="radio-1" name="hogehoge" type="radio" value="true" />
            <label for="radio-1">true</label>
          </div>
          <div class="r-radio">
            <input id="radio-2" name="hogehoge" type="radio" value="false" />
            <label for="radio-2">false</label>
          </div>
        </div>
      </div>
    </div>
[/code]

他にも色々な書き方があるでしょうし、もっとうまいやり方もあるかもしれませんがとりあえずこれでできるはずと言うことで。


CC BY-SA 3.0
2016-12-13T14:39:32.433
31124
2016-12-13T14:39:32.433
13972
31121
answer