使用jQuery添加和获取元素的类名

Question

我正在使用脚本自动添加Twitter动态。我想用jQuery添加一个包含<br/>的元素。现在它是这样的：

    <ul id="twitter_update_list">
    <li><span>something</span> <a  href="#">about 4 hours ago</a></li>
    <li><span>something</span> <a  href="#">about 6 hours ago</a></li>
    </ul>

我想用jquery在每个</span>后添加一个<br/>，使其变成这样。

 <ul id="twitter_update_list">
    <li><span>something</span><br/> <a  href="#">about 4 hours ago</a></li>
    <li><span>something</span><br/> <a  href="#">about 6 hours ago</a></li>
    </ul>

- esafwan

---

我...我只是想问一下...为什么？...我的意思是，为什么不把<br/>包含在HTML中，然后使用JS来实现呢...? - Shikiryu

Answer 1

您可以使用.after()函数在选择器匹配的每个元素后面插入一个新的元素，代码如下：

$("#twitter_update_list span").after("<br />");

你可以在这里测试它。结果就是...嗯，就是你在问题中描述的那样 :)

- Nick Craver

---

@esafwan，你的问题的答案是这个，但我更喜欢@balexandre的答案 :D 不冒犯@Nick。 - Starx

@Starx - 如果符合需求，我同意使用CSS，但可能不行...因为结果不同。 - Nick Craver

Answer 2

为什么在JavaScript中搞砸，而你可以用CSS做同样的事情呢？

#twitter_update_list li span { display: block; margin-bottom: 10px; }

- balexandre

---

我同意，在内容中放置演示标记是不可取的。使用CSS来设计内容=最佳实践。 - wiifm

将<span>设置为块级元素并不相同...你应该注意到这一点，他可能会有任何样式，这会完全强制它独占一行。 - Nick Craver

@Nick，那么他只需要使用 float: left; 并正确地设置样式... 不应该由脚本处理！ - balexandre

“float: left;” 也是不同的，它会将元素放置在行的开头，与其他浮动元素相比也有所不同……我的观点只是你不能总是随意替换，这取决于正在进行的其他样式。 - Nick Craver

@Nick 我的观点也很简单，样式应该在 CSS 方面处理，而不是在代码中，更糟糕的是，绝不能在 JavaScript 中处理 :o) - balexandre

Answer 3

如果只是外观问题，那么使用 CSS：

#twitter_update_list>li>span{
    display:block}

或者如果你真的想要jQuery：

$('#twitter_update_list>li>span').after('<br/>');

- Klaster_1 Нет войне

Answer 4

$("#twitter_update_list span").after("<br />");

$("#twitter_update_list span").after("<br />");

- Anpher