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>

你能解释一下吗？

Answer 1

简单地说：

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

参见：

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

Answer 2

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

Answer 3

试试这个

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

Answer 4

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

Answer 5

$(this).siblingings().eq(0)

应该这样做。

Answer 6

在 id 为“test”的输入之后选择第一个带有“experience”类的元素

console.log($('#test').nextAll(".experience").first().text());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<input class="showNextExperience" >
<div class="experience">Experience 1</div>

<input id='test' 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>