jQuery:自分以外の兄弟を指定

harada 103views 更新:2016年8月29日

siblings()を利用することで指定要素以外の兄弟要素へ効果を付けることができます。

html例

<ol>
      <li class="todo"><a id="start" href="#">01</a></li>
      <li class="todo"><a href="#">02</a></li>
      <li class="todo"><a href="#">03</a></li>
      <li class="todo"><a href="#">04</a></li>
</ol>

jQuery例

以下の場合は01をクリックしたときに、01以外のli要素すべてのtodoのclassを削除することになります。

<script type="text/javascript">
jQuery(function ($) {
  $('#start').click(function(){
    $(this).parents().siblings().removeClass('todo');
  });
});
</script>

参考:jQuery 兄弟要素の取得と操作 – 自分以外の兄弟、自分以降の兄弟、自分以前の兄弟等

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません