jQueryで親divの外側のこの要素にクラスを追加します。

Question

要素の特定の親を対象にして、jQueryでクラスを追加しようとしています。例：

$('.disable-link').click(function(e) { 
 
    $(this).hide(); 
 
    $(this).parents('.item').find('.title').addClass('disabled'); 
 
    
 
    e.preventDefault(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="item"> 
 
    <div class="title">Thing 1</div> 
 
</div> 
 
<div> 
 
    <a class="disable-link" href="#">Click to Disable Thing 1</a> 
 
</div> 
 
<div class="item"> 
 
    <div class="title">Thing 2</div> 
 
</div> 
 
<div> 
 
    <a class="disable-link" href="#">Click to Disable Thing 2</a> 
 
</div> 
 
<div class="item"> 
 
    <div class="title">Thing 3</div> 
 
</div> 
 
<div> 
 
    <a class="disable-link" href="#">Click to Disable Thing 3</a> 
 
</div>

私は.parents('.item')を使用することによって、それはthisとその特定itemクラスにすべての道チェーンまで行くとその具体的な1を標的とすることを思ったが、何らかの理由でそうではありません。

私はparent().parent().find('.title')を試してみましたが、最終的にはdisabledクラスを追加するだけでなく、すべてのタイトルにクラスを追加します。 私はそれが何か簡単だと感じていますが、私は特定の継承の周りに私の頭を包むことはできません。

$('.disable-link').click(function(e) { 
    $(this).hide(); 
    $(this).parents('div').prev('.item').find('.title').addClass('disabled'); 

    e.preventDefault(); 
}); 

・ホープ、このことができます：あなたのよう.prev()メソッドを使用して、以前の.itemを取得し、その後div最初の親を対象とする必要がありますので、クラス.itemと

Answer 1

要素が.disable-link要素の親ではありません。

$('.disable-link').click(function(e) { 
 
    e.preventDefault(); 
 
    
 
    $(this).hide(); 
 
    $(this).parents('div').prev('.item').find('.title').addClass('disabled'); 
 
});

.disabled{ 
 
    background-color: grey; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="item"> 
 
    <div class="title">Thing 1</div> 
 
</div> 
 
<div> 
 
    <a class="disable-link" href="#">Click to Disable Thing 1</a> 
 
</div> 
 
<div class="item"> 
 
    <div class="title">Thing 2</div> 
 
</div> 
 
<div> 
 
    <a class="disable-link" href="#">Click to Disable Thing 2</a> 
 
</div> 
 
<div class="item"> 
 
    <div class="title">Thing 3</div> 
 
</div> 
 
<div> 
 
    <a class="disable-link" href="#">Click to Disable Thing 3</a> 
 
</div>