jQuery查找下一个具有类的元素

Question

我正在尝试找到下一个具有"class = error"的元素，但是遇到了困难。

在查看jQuery网站上的演示时，这应该有效，但实际上并没有。

$("button[disabled]").next().text("this button is disabled");

<div>
   <button disabled="disabled">First</button>
   <span>no overwrite</span>
   <span class="error"></span>
</div>

<div>
   <button>Second</button>
   <span></span>
</div>

<div>
   <button disabled="disabled">Third</button>
   <span>no overwrite</span>
   <span class="error"></span>
</div>

我正在尝试找到在问题元素之后的span或div或其他内容，就像上面的按钮一样。

因此，禁用按钮行应该显示为“不覆盖此按钮已禁用”

我已经尝试过

$("button[disabled]").next(".error").text("this button is disabled");

但是没有成功。

- Loony2nz

---

当你说它不起作用时，是指文本显示“该按钮已禁用”，而实际上应该显示“不要覆盖，该按钮已禁用”吗？ - Robert Harvey

@Robert：抱歉让你感到困惑。我的意思是在禁用的按钮右侧应该有文本，“此按钮已禁用”，而不是实际的按钮文本。 - Loony2nz

Answer 1

问题在于你使用了下一个遍历函数，而不是使用nextAll函数。

$("button[disabled]").nextAll(".error").text("this button is disabled");

当您使用 "next" 时，它只是查看 "下一个" 元素，即 <!--next-->。

<span>no overwrite</span>

Next all会查找所有下一个兄弟元素

- PetersenDidIt

---

如果您有多个 ".error" 元素，您需要使用 ".nextAll(".error").first()"。这可能有点违反直觉，但是 ".next()" 只适用于紧接在后面的元素，并且无法设置条件。 - Sprachprofi

不知道为什么不能使用nextAll("<class>").first()来获取下一个元素。而且为什么当前的描述中next被称为“nextElement()”。这就是为什么在编程中命名能够自我解释的函数非常重要的原因！我甚至无法想象有多少人会因此受到纠正.. - sksallaj

换句话说：.nextAll() 首先按选择器过滤，然后在该集合中查找真正的下一个元素。而 .next 则首先查找下一个元素，然后再对该集合进行过滤。后者可能会用于处理有时会出现的结尾 <hr> 等情况... - Frank N

Answer 2

试试这个：

$("button[disabled=disabled]").parent().find("span.error").text("this button is disabled");

希望这能帮到你。

Sinan。

- Sinan

---

@Sinan：不，什么也没有发生。$("button[disabled=disabled]").parent().find("span.error").text("this button is disabled");<div> <button disabled="disabled">第一个</button> - <span>不覆盖</span><span class="error"></span> </div> <div> <button>第二个</button> - <span></span> </div> <div> <button disabled="disabled">第三个</button> - <span>不覆盖</span><span class="error"></span> </div> 将其插入浏览器中并查看是否适用于您。带有类名为“error”的禁用按钮应该会更新。 - Loony2nz

Answer 3

next()在这种情况下不起作用，因为它必须是兄弟节点才能起作用。在这种情况下，您需要：

$("button[disabled]").parent().nextAll()
  .find("span.error:first").text("this button is disabled");

- cletus

---

或者你可以始终执行.next().next()。 - Greg

这种方法有点可行。我只能更新第二个带有错误类的 span 标签的内容。 - Loony2nz