jQuery wählt das erste Element aus, das danach eine bestimmte Klasse hat


Answers

Suchst du das?

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

Aktualisierte Geige

Question

Hier ist meine Geige: 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');
});​

Ich brauche es also, wenn du auf einen p.click , wird das nächste p.target rot.

Wenn Sie also auf 'Click 1' wird 'Target 1' rot. Wenn Sie auf 'Click 2' wird 'Target 3' rot.

Sowie .find habe ich versucht .closest und aus der jQuery-Dokumentation scheint es mir, als ob es funktionieren sollte. Wie Sie dem HTML .target ist .target kein Kind von .click , falls das einen Unterschied macht.




Basierend auf Ihrem aktualisierten HTML, habe ich diese Geige erstellt: http://jsfiddle.net/wxWgG/22/

... und benutzte diese jQuery

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

Ist es das was du wolltest?




Ihr HTML-Konstrukt erleichtert den Zugriff auf bestimmte Ziele nicht. Wir können erreichen, was Sie wollen, aber das Skript wird kompliziert, wenn Sie auf diese Weise verfahren. Fügen Sie stattdessen ein Gruppierungs-Div hinzu, mit dem Sie das Skript klein und einfach gestalten können.

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 arbeitet mit dem Geschwister. In Ihrem Fall wird nach allen # .target Geschwister mit der Klasse .target .

Was Sie brauchen, sind parents -> sibling -> child .

DEMO

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