selectorにマッチする直前の兄弟要素を選択する。Node.previousSiblingにあたる。
jQueryを利用することで、ブラウザによりまちまちな空白の扱いを気にすることなく利用できる。
サンプル
Javascript
$('#sample-1 .photo').css({
margin: 5,
padding: 10,
border: '1px solid #CDCDCD',
display: 'inline-block'
});
$('#execute-1').on('click', function(e){
$(e.target).prev().css({border: '5px solid #33FFFF'});
});
HTML
<div id="sample-1">
<img src="/resource/images/photos/1.jpg" class="photo" alt="画像1" style="width: 40%;">
<img src="/resource/images/photos/2.jpg" class="photo" alt="画像2" style="width: 40%;">
<img src="/resource/images/photos/3.jpg" class="photo" alt="画像3" style="width: 40%;">
<span class="cq-btn m-primary" id="execute-1">実行</span>
</div>
直前の兄要素がselectorにマッチした場合取得する。
サンプル
Javascript
$('#sample-2 .photo').css({
margin: 5,
padding: 10,
width: 200,
border: '1px solid #CDCDCD',
display: 'inline-block'
});
$('#execute-2').on('click', function(e){
$(e.target).prev('.select').css({border: '5px solid #D33682'});
});
HTML
<div id="sample-2">
<img src="/resource/images/photos/1.jpg" class="photo" alt="画像1" style="width: 40%;">
<img src="/resource/images/photos/2.jpg" class="photo" alt="画像2" style="width: 40%;">
<img src="/resource/images/photos/3.jpg" class="photo select" alt="画像3" style="width: 40%;">
<span class="cq-btn m-primary" id="execute-2">実行</span>
</div>