jQuery - Suche nach dem nächsten Div

Question

Ich versuche, das nächste Div nach einer Eingabetaste zu finden und es umzuschalten.

Was mache ich falsch?

JS:

$(".showNextExperience").click(function() {
    $(".experience").show();
});

HTML:

<input class="showNextExperience" >
<div class="experience">Experience 1</div>

<input class="showNextExperience">
<div class="experience">Experience 2</div>

<input class="showNextExperience">
<div class="experience">Experience 3</div>

<input class="showNextExperience" >
<div class="experience">Experience 4</div>

Okay, das funktioniert NICHT ---

$(".showExperience").click(function() {
    $(this).next(".experience").toggle();
});

<table class="data">
    <tr class="tableHead">
        <td></td>
        <td width="50" align="right"><input type="button" class="showExperience" value="show"></td>
    </tr>
</table>
<div class="experience">2</div>

Wenn ich die Eingabetaste direkt über das DIV verschiebe, funktioniert es einwandfrei.

$(".showExperience").click(function() {
    $(this).next(".experience").toggle();
});

<input type="button" class="showExperience" value="show">
<div class="experience">2</div>

Können Sie das erklären?

Answer 1

Einfach:

$(".showNextExperience").click(function() {
    $(this).next(".experience").toggle();
});

Siehe:

• http://api.jquery.com/toggle/
• http://api.jquery.com/next/

Answer 2

$(".showNextExperience").click(function() {
    $(this).next().show();
});

Answer 3

Versuchen Sie dies

$(".showNextExperience").click(function() {
    $(this).next("div.experience").toggle();
});

Answer 4

$(this).siblingings().eq(0) sollte es tun.

Answer 5

Angenommen, Sie haben Elemente zwischen der auslösenden Eingabe und dem manipulierten Div:

<input class="showNextExperience" >
<p>Hello, new line</p>
<div class="experience">Experience 1</div>

<input class="showNextExperience">
<p>Some text</p>
<div>And an info block</div>
<div class="experience">Experience 2</div>

Dann müssen Sie nextAll nicht nur nach dem nächsten Element zu suchen, sondern das gesamte DOM zu durchsuchen, was wahrscheinlich einfacher zu programmieren ist als mit next().find() :

$(".showNextExperience").click(function() {
    $(this).nextAll(".experience").toggle();
});