jQuery兄弟姐妹选择器问题？

Question

我有这个小脚本：

http://jsfiddle.net/gmAjC/

<input name="n1" value="test">
<br/><span></span>
<br/>
<span style="background-color:red">after input</span>

这是js：

$('input[name=n1] ~ span:first').html('new content');

它工作正常，直到我将'br'（输入后）更改为'p'。这是一个jQuery错误还是我的查询错了？感谢。

Answer 1

这是你在jsFiddle

中的HTML

<span style="background-color:red">before input</span><p/>
<input name="n1" value="test">
<br/><span></span>
<span style="background-color:red">after input</span>

如果我摆脱了第一行末尾的<p/>，那么如果我在输入后将<br/>更改为<p>，则脚本可以正常工作。

以下示例有效

<span style="background-color:red">before input</span>
<input name="n1" value="test">
<p></p><span></span>
<span style="background-color:red">after input</span>

这是更新的小提琴：http://jsfiddle.net/gmAjC/2/

在此处阅读有关自动关闭代码的更多信息（以及<p/>无效的原因）：http://www.456bereastreet.com/archive/201005/void_empty_elements_and_self-closing_start_tags_in_html/