jQuery - 寻找下一个Div

Evi*_*mes 10 jquery

我试图在输入按钮后找到下一个div并切换它.

我究竟做错了什么?

JS:

$(".showNextExperience").click(function() {
    $(".experience").show();
});
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)

好的,这不起作用---

$(".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>
Run Code Online (Sandbox Code Playgroud)

当我在DIV上方移动输入按钮时它工作得很好.

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

<input type="button" class="showExperience" value="show">
<div class="experience">2</div>
Run Code Online (Sandbox Code Playgroud)

你能解释一下吗?

kar*_*m79 15

只是:

$(".showNextExperience").click(function() {
    $(this).next(".experience").toggle();
});
Run Code Online (Sandbox Code Playgroud)

看到:

  • 因为`.next`只选择*下一个兄弟*.对于table元素,您可能需要遍历父行,找到下一行,并在行中找到`.experience` div.DOM结构很重要!例如`$(this).closest("tr").next().find(".experience").toggle()` (5认同)

zac*_*urn 6

$(".showNextExperience").click(function() {
    $(this).next().show();
});
Run Code Online (Sandbox Code Playgroud)