jQuery - 查找下一个 Div

Question

我正试图找到一个输入按钮后面的下一个div并切换它。

我做错了什么？

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>

好的，这个不起作用---

$(".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>

当我将输入按钮移动到该 DIV 上方时，它就可以正常工作。

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

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

你能解释一下吗？

- Evik James

---

作为对您的问题的晚回答，为什么您表格内的按钮没有起作用。因为 next('showExperience') 搜索具有该类的下一个同级元素，但是您的按钮没有同级元素可以搜索。我可以补充一下，那个输入标签从未关闭（不良编码），上面是一个空 td（非常不良的编码），我可以问一下整个表格的意义是什么，如果它真的只包含一个按钮吗？>_< - T_D

Answer 1

简单来说：

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

参见：

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

- karim79

---

这是正确的答案，也是我一直在做的。但是对我来说不起作用。我的表格里有些问题。当输入按钮在表格外时，它可以正常工作。但是当我将同样的按钮剪切/粘贴到表格中时，它就停止工作了。谢谢！ - Evik James

因为.next仅选择下一个相邻的兄弟元素。对于表格元素，您可能需要向上遍历到父行，找到下一行，然后在该行内查找.experience div。DOM结构很重要！例如，$(this).closest("tr").next().find(".experience").toggle()。 - karim79

你是100%正确的!!! 不过那个解决方案很丑陋。我的div在表格后面。我必须要parent().parent().parent().next("div.experience")吗？还是类似这样的东西？但我也无法让它起作用。 - Evik James

抱歉在这里评论，但是这个答案虽然是解决问题的正确答案，但实际上并没有回答标题中的问题：“如何找到下一个 div”。.next([selector])只会检索与选择器匹配的下一个元素，而你认为 .next([selector]) 检索到的是下一个匹配选择器的元素。这并不完全相同。 - Nico

Answer 2

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

- zachzurn

Answer 3

试试这个

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

- ShankarSangoli

Answer 4

$(this).siblingings().eq(0) 应该可以做到。

- Michael

---

好的。INGS，为什么不学一些jQuery呢，@RUJordan？;-D - qwertynl

是的，这就像你的兄弟姐妹一样。 - iConnor

我讨厌我兄弟姐妹的代码。 - Sterling Archer

Answer 5

假设您在触发输入和操作的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>

然后您必须使用 nextAll 来搜索整个 DOM，而不仅仅是下一个元素，这比使用 next().find() 更简单:

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

- Robbit

---

如果下一个元素在点击的元素上方，这个代码还能正常工作吗？ - Kappacake