javascript - jQueryの兄弟にクラスを適用するにはどうすればよいですか?

Question

さて、私はこのコードを持っています:

<li>
  <a href="#step-2" class="step-3-link selected">
    <span class="stepNumber">2</span>
  </a>
  <br />
  <br />
  <span class="sn2">Home Page Banner</span>
</li>

私がする必要があるのは、「li a」にクラスが選択されている場合 (この場合は step-3-link が選択されている場合)、クラス「sn2」のスパンにクラス「selected-span」を追加する必要があることです。

以前に試したコードは次のとおりです。

$('.swMain ul.anchor li a.selected').siblings('span').addClass('selected-span');

.siblings、.find、.parent などを試しましたが、成功しませんでした。親切に私を同じように案内してください。

Answer 1

CSS 2.1 の一般的な兄弟セレクターのみで実行でき、JS は使用できません。

したがって、 という別のクラスを追加する代わりにselected-span、必要な設定を次のブロックに入れます。

.step-3-link.selected ~ span.sn2 {
    /* enter custom settings here */
}

---

一般的な兄弟セレクター

~ コンビネータは 2 つのセレクターを分離し、最初の要素が先行し、両方が共通の親を共有する場合にのみ、2 番目の要素と一致します。

Answer 2

このコードを使用して、

if($('a').hasClass('selected')){
     $(this).parent().find('.sn2').addClass('selected-span');
}

Answer 3

あなたが正しく解決しようとしている問題を理解していればselected、クリックしたものにクラスを追加しa spanて、既存の選択を削除することをお勧めします。

$('li a').click(function(){
$('li a span').removeClass('selected');
$(this).find('span').addClass('selected');
});

Answer 4

フィドル=）

Jクエリ:

$(document).ready(function() {
    $('li').each(function() {
        if($('a.selected').length) {
            $('.sn2', $(this)).addClass('selected-span');
        }
    });
});