jquery - jQueryターゲットの親

Question

私は次のhtml構造を持っています：

<ul>
<li id = "1"><a href = "">1</a></li>
<li id = "2"><a href = "" class = "active">2</a></li>
<li id = "3"><a href = "">3</a></li>
<li id = "1"><a href = "">4</a></li>
</ul>

「active」のクラスをid2のli要素に適用したいと思います。次のことを試しました。

if(jQuery('#navigation ul li a').hasClass('active')){
jQuery(this).parent().addClass('active');
}

しかし、それは機能していないようです。

Answer 1

以下を使用します。

$('#navigation a.active').closest('li').addClass('active');

Answer 2

現在のコードでは、あなたthisは無効です-作業を行う関数がないため、作業thisしていると思われる要素に設定されません。

を使用するのではなく.hasClass、セレクターを使用して一致する要素を見つけます。次に、を使用.each()して、一致する各要素を反復処理し、毎回正しく設定thisできます。

jQuery('#navigation ul li a.active').each(function() {
    jQuery(this).parent().addClass('active');
});

これにより、元のコードと非常によく似たコードが得られます。

ただし、Konstantinの答えの方が優れています。これにより、手動で反復する必要がまったくなくなります。その答えのバリエーションとして、すべての<a>要素がクラスを必要とする>内に直接含まれていることが確実な場合<liは、次を使用できます。

jQuery('#navigation li > a.active').parent().addClass('active');

注意：IDフィールドは一意である必要があり、数値IDはHTML5でのみ有効です。

Answer 3

まず、HTML4 を使用する場合は、数値だけでidはなく、たとえば "id2" のように文字で始めてください。次に、IDを選択します

$('#id2').addClass('active');

Answer 4

使用するだけです：

$('#2').addClass('active');

コードが機能しなかった理由は、セレクター '#navigation ul li a' が多くの結果を返した可能性が高いのに対し、コードは 1 つだけを返すと想定しているためです。各要素を反復処理して「アクティブ」かどうかをテストする場合は、次を試してください。

$('#navigation ul li a').each(function() {
  if($(this).hasClass('active')) {
    $(this).parent().addClass('active');
  }
});

Answer 5

$(".active").parent().addClass('active')