jquery - 順序付けられていないリストの兄弟要素の CSS にアクセスできません

Question

ほとんどの部分でうまく機能しているjQueryスクリプトがあります。特定の DIV 要素を表示/非表示にするためにクリックするリンクのリストがあります。リンクをクリックすると、CSS が変更されます (リンクの色が赤に変わります)。

HTML

<ul style="list-style: none;">
    <li><a href="#" class="review-link" name="review-1">Click to see Review 1</a></li>
    <li><a href="#" class="review-link" name="review-2">Click to see Review 2</a></li>
    <li><a href="#" class="review-link" name="review-3">Click to see Review 3</a></li>
</ul>

jQuery

$(".review-link").click(function () {
  var divname = this.name;
  $("#"+divname).show("slow").siblings().hide("slow");
  $(this).css("color","red");
  $(this).siblings().css("color","green")
});

私が問題を抱えているのは、他のすべてのリンクを元の色にリセットすることです。私の例では、他のすべてのリンクを緑色にしようとしていますが、それを機能させることさえできません。おそらく、jQuery の「兄弟」プロパティを理解していないのでしょうか?

jsFiddle の例を次に示します。

Answer 1

イベントでは、onclick他の操作を行う前に、すべてのリンクを元の色に設定してください。

$(document).ready(function(){

    $(".review-link").css("color","green")
    $(".review-link").click(function () {
      var _this=$(this);            
       _this.closest("ul").find(".review-link").css("color","green");
       //your remaining code goes here
    });
});

作業サンプルhttp://jsfiddle.net/uCS3P/5/

Answer 2

.review-link要素には兄弟がありません。親要素の兄弟が必要です。

代わりにこのようなものを使用できます...

$(this).parent().siblings().find("a").css("color","green")

Answer 3

$.siblings()直接関連する要素を探します。この場合、はクリックさ$(this)れた要素を参照しており、各リンクはタグ内にネストされているため、直接の兄弟はありません。<a><li>

$(this).parent().siblings().find('a').css("color","green");

また

$(this).parent().siblings().children('a').css("color","green");

動作します。

jQuery で css を直接変更する代わりに、addClass と removeClass を使用することを検討することをお勧めします。これにより、マークアップとスクリプトの分離がより完全に保たれます。