jQuery兄弟选择器问题？答案

【问题标题】：jQuery siblings selector problem?jQuery兄弟选择器问题？
【发布时间】：2011-04-18 02:10:44
【问题描述】：

我有这个小脚本：

<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 错误还是我的查询错误？谢谢。

【问题讨论】：

好吧，如果你放一个
，那么span就不再是兄弟了。
提示： 始终检查生成的 HTML。然后你会注意到 标记以及它产生的问题（ 不是自闭合标记）。所以答案是：既不是错误，也不是选择器错误。你的 HTML 是。
您在这个问题中给出的示例（不是在小提琴中）按预期工作。它选择出现在输入之后的第一个跨度兄弟，并将内容设置为"new content"。该跨度是您在   标记之后添加的空跨度。

标签： javascript jquery css jquery-selectors

【解决方案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>

如果我去掉第一行末尾的，那么如果我将输入后的  更改为，脚本就可以正常工作。

以下示例有效

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

在此处阅读有关自闭合标签（以及为什么 无效）的更多信息：http://www.456bereastreet.com/archive/201005/void_empty_elements_and_self-closing_start_tags_in_html/

【讨论】：

原来jquery不太喜欢自闭标签:)谢谢大家。
奇怪的是，jQuery 在创建元素时会支持自动关闭的 标签：jsfiddle.net/FG7qJ