jQueryの基礎：兄弟要素を条件付きで操作する

サンプルはこちら。

See the Pen qugry by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

前回兄弟要素の操作を紹介しましたが、その兄弟の中から条件に合致する対象のみ操作できます。

JavaScript

$(".naRed").click(function(){
  $(this).nextAll(".red").css("color","#f00");
});

「nextAll()」で「次以降の兄弟」を選択することができますが、その中に条件を記述することができます。

今回は「nextAll(“.red”)」としているため、兄弟の中でクラス「red」を持つものだけに赤字にする処理を行っています。