HOME > > > > >

.prevall([selector])

引数

(string)selector

selectorにマッチする兄要素を選択する。

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

サンプル

実行結果

画像1 画像2 画像3 実行

Javascript

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

HTML

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

selectorにマッチした要素のみが選択される

サンプル

実行結果

画像1 画像2 画像3 実行

Javascript

  1. $('#sample-2 .photo').css({
  2.     margin: 5,
  3.     padding: 10,
  4.     width: 200,
  5.     border: '1px solid #CDCDCD',
  6.     display: 'inline-block'
  7. });
  8.  
  9. $('#execute-2').on('click', function(e){
  10.     $(e.target).prevAll('.select').css({border: '5px solid #D33682'});
  11. });

HTML

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