javascript - 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>

这是更新后的 fiddle :http://jsfiddle.net/gmAjC/2/

在此处阅读有关自闭合标签(以及为什么 <p/> 无效的原因)的更多信息:http://www.456bereastreet.com/archive/201005/void_empty_elements_and_self-closing_start_tags_in_html/