jQueryのは、ここでは、この

Question

後に特定のクラスを持つ最初の要素を選択するには、私のバイオリンです： http://jsfiddle.net/jamesbrighton/wxWgG/4/

HTML：

<div> 
    <p class="click">Click 1</p> 
    <p>This should be ignored</p> 
    <p>This should be ignored</p> 
    <p>This should be ignored</p> 
</div> 

<div> 
    <p class="target">Target 1</p> 
</div> 
<div> 
    <p class="target">Target 2</p> 
</div> 


<div> 
    <p class="click">Click 2</p> 
    <p>This should be ignored</p> 
    <p>This should be ignored</p> 
    <p>This should be ignored</p> 
</div> 

<div> 
    <p class="target">Target 3</p> 
</div> 
<div> 
    <p class="target">Target 4</p> 
</div> 

jQueryの：あなたがクリックしたときに

$('.click').click(function() { 
    $(this).nextAll('.target').css('color','red'); 
});​ 

私はそれを必要としますp.click、次にp.targetが赤色に変わります。

'Click 1'をクリックすると、'Target 1'が赤色に変わります。 'Click 2'をクリックすると'Target 3'が赤色に変わります。

.find私は.closestを試しましたが、jQueryのドキュメントからはうまくいくはずです。 HTMLから見ると、.targetは.clickの子ではありません。

Answer 1

この場合、私はどのようにperformant .index()があるのか​​分かりませんが、別の方法があります。 （少なくとも1 .target要素2つの.click要素の間に常にあるか、異なる言葉で表現）：要素が選択されているので、これは動作します

var $elements = $('.click, .target'); 

$('.click').click(function() { 
    $elements.eq($elements.index(this) + 1).css('color','red'); 
});​ 

DEMO

また、これは決して二つの連続.clickの要素があることを前提としていドキュメントに表示される順序。

Answer 2

あなたはhtml構成では特定のターゲットまでアクセスすることができません。私たちはあなたが望むものを達成することができますが、そのような方法でトラバースするとスクリプトが複雑になります。代わりに、スクリプトを小さく簡単にするグループ化divを追加してください。

DEMO

HTML：

<div class="group"> <!-- added grouping wrapper --> 
<div> 
    <p class="click">Click 1</p> 
    <p>This should be ignored</p> 
    <p>This should be ignored</p> 
    <p>This should be ignored</p> 
</div> 

<div> 
    <p class="target">Target 1</p> 
</div> 
<div> 
    <p class="target">Target 2</p> 
</div> 
</div> 
<div class="group"> 
<div> 
    <p class="click">Click 2</p> 
    <p>This should be ignored</p> 
    <p>This should be ignored</p> 
    <p>This should be ignored</p> 
</div> 

<div> 
    <p class="target">Target 3</p> 
</div> 
<div> 
    <p class="target">Target 4</p> 
</div> 
</div> 

JS：

$('.click').click(function() { 
    $(this).closest('.group').find('.target').css('color','red'); 
}); 

---

.nextAllは兄弟で動作します。あなたのケースでは、クラス.targetのすべての＃クリックの兄弟を探します。

parents -> sibling -> childが必要です。

DEMO

$('#click').click(function() { 
    $(this).parent().siblings().find('.target').css('color','red'); 
}); 

Answer 3

あなたはこれを試すことができます。

$('#click').click(function() { 
    var go = true; 

    var item = $(this).parent(); 

    while(go && item) { 
     var target = $('.target', item)[0]; 

     if(target != null) { 
      go = false; 
      $(target).css('color', 'red'); 
     } 

     item = $(item).next()[0]; 
    } 
});​ 

Answer 4

これは、あなたのhtmlコードに必要な要素を選択：

$('.click').click(function() { 
    $(this).parent("div").next('div').find('.target').css('color','red'); 
});​ 

Answer 5

あなたはこのをお探しですか？

$('.click').click(function() { 
    $(".target", $(this).parent().next()).css('color','red'); 
}); 

Updated Fiddle

Answer 6

あなたの更新されたHTMLに基づいて、私はこのバイオリンを作成しました：http://jsfiddle.net/wxWgG/22/

...と

$('.click').click(function() { 
    $(this).parent().next().find('p.target').css('color','red'); 
});​ 

このjQueryのを使用し、あなたが何を望むかということですか？