selectorにマッチする直後の弟要素を選択する。Node.nextSiblingにあたる。

jQueryを利用することで、ブラウザによりまちまちな空白の扱いを気にすることなく利用できる。

サンプル

実行結果

実行

Javascript

1. $('#sample-1').css({
2.     margin: 5,
3.     padding: 10,
4.     border: '1px solid #CDCDCD',
5.     display: 'inline-block'
6. }).find('#execute-1').on('click', function(e){
7.     console.log(e.target);
8.     $(e.target).next().css({border: '5px solid blue'});
9. });

HTML

1. <div id="sample-1">
2.   <span class="cq-btn m-primary" id="execute-1" data-target="2">実行</span>
3.   <img src="/resource/images/photos/1.jpg" class="photo" alt="画像1" style="width: 40%;">
4. </div>

直後の弟要素がselectorにマッチした場合取得する。