jQueryのネストされたスパン要素へのアクセス

Question

特定のアイテムをクリックすると、ネストされたスパン要素のクラスを変更しようとしています。 JSFiddle goes here。

HTML：

<div id="title_1" class="title">Title 1</div> 
<span id="foo_1" class="foo"> 
    foo contents<br /> 
    <span class="bar">bar contents</span> 
    <br /><br /> 
</span> 

<div id="title_2" class="title">Title 2</div> 
<span id="foo_2" class="foo"> 
    foo contents<br /> 
    <span class="bar">bar contents</span> 
    <br /><br /> 
</span> 

私は現在JSFiddleでやってる$(this).nextAll('.foo:first').addClass('highlight');のようなものの最初のスパンのクラスを変更することも可能です。

しかし、私は 'bar'要素のクラスだけを変更したいと思います。私が試したもののいくつかのものの中で

：

$(this).nextAll('.foo:first .bar:first').addClass('highlight'); 
$(this).nextAll('.foo .bar:first').addClass('highlight'); 
$(this).nextAll('.foo:first').nextAll('.bar:first').addClass('highlight'); 
$(this).next('.foo').next('.bar').addClass('highlight'); 

...すべての成功なし。

ここでは何か基本的なものがないと思います。誰かが私を助けることができますか？ここで

Answer 1

あなたが行く：https://jsfiddle.net/nez0cvsm/

ジャスト（スパン内のスパンにアクセスするため）（タイトルの後スパンにアクセスするために）next()でnextAll()を変更して.children()を追加します。私は、その範囲内に別のものがあると仮定して、「発見」の代わりに子供を使っていました。

Answer 2

あなたは、複数のスパンを持っていることを計画し、あなただけは、以下を使用することができますバークラスを持つものを選択したい場合：ここで（余分なスパンで）

$(this).next().children('.bar').addClass('highlight'); 

例：https://jsfiddle.net/1ekrjqk1/

Answer 3

また、次の使用して、クラスを持つ要素を見つけることができますbar

$(this).next('.foo').find('.bar').addClass('highlight'); 

デモ： https://jsfiddle.net/yssusqq9/