Jquery1.11で最も近い次の要素をセレクトする方法

規則性なく多重にネストされたタグの中にclass="target"があるとして
そこから最も近い次のclass="target"要素をセレクトする方法をご存知の方お教えくださいませ
起点となる要素は変わります

<!--不規則にネストされたタグのなかにtarget-->
<div>
  <div>
    <span>
      <input id="one" class="target" type="text" value="1"/>
    </span>
  </div>
</div>
<input id="two" class="target" type="text" value="2"/>
<div>
  <div>
    <a>
      <p>
        <span>
          <input id="three" class="target" type="text" value="3"/>
        </span>
      </p>
    </a>
  </div>
</div>

起点は変わりますが
id="one"をクリック（起点）にテストしました

nextAll は undefindとなりました

$(".target").click(function(event){
    var obj = $(this).nextAll('.target:first');
    alert(obj.val());
});

closest は 1 自分自身を取得してしまいました

$(".target").click(function(event){
    var obj = $(this).closest('.target');
    alert(obj.val());
});

parent() は不規則なネストには使えず undefindとなりました

$(".target").click(function(event){
    var obj = $(this).closest('.target').parent().closest('.target');
    alert(obj.val());
});

next は undefindとなりました

$(".target").click(function(event){
    var obj = $(this).next('.target');
    alert(obj.val());
});

find は undefindとなりました

$(".target").click(function(event){
    var obj = $(this).find('.target');
    alert(obj.val());
});

closest + は undefindとなりました

$(".target").click(function(event){
    var obj = $(this).closest('.target + .target');
    alert(obj.val());
});

以上、分かる方お助け下さいませ

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

回答2件

ベストアンサー

こうです

javascript
1$(function(){
2  $("#f1 .target").on('click',function(e){
3    var idx=$("#f1 .target").index(this);
4    console.log($("#f1 .target").eq(idx+1).attr('id'));
5  });
6});

HTML
1<form id="f1">
2<div>
3  <div>
4    <span>
5      <input id="one" class="target" type="text" value="1"/>
6    </span>
7  </div>
8</div>
9<input id="two" class="target" type="text" value="2"/>
10<div>
11  <div>
12    <a>
13      <p>
14        <span>
15          <input id="three" class="target" type="text" value="3"/>
16        </span>
17      </p>
18    </a>
19  </div>
20</div>

threeは次にもう.targetがないのでundefinedを返します

投稿2018/05/10 11:35

yambejp

総合スコア114829

tesopgmh

2018/05/11 01:24

ありがとうございます！インデックスというのがあるんですね！勉強になりました

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

次の要素なのか手前の要素なのかがちょっと判断できなかったため、
一応直近の次の要素に対するやり方です。

javascript
1$(function() {
2 
3  // 要素をクリックしたら発動
4  $('.target').click(function() {
5 
6    // 引数にthisを指定し、クリックした順番を変数に格納
7    var i = $('.target').index(this);
8    var i = i + 1;
9
10    // 順番を表示
11    $('.target').eq(i).css('background','red');
12 
13  });
14});