jQuery - 如何动态地将列表项添加到无序列表中？
看起来是一件简单的事情（尽管我仍在学习 jQuery 的来龙去脉）。
这是我的 HTML：
<div id="fbsignup">
<div class="message messageerror">
<strong>There were errors with your registration:</strong>
<ul></ul>
</div>
</div>
这是我的（尝试的）jQuery：
// Check Required Fields.
$('#fbsignup input.required').each(function () {
if ($(this).val().trim() == '') {
$(this).next('em').html('*').show();
$('#fbsignup .message ul').add('li').html('Fields marked with * are required.');
}
});
这就是它对 DOM 所做的事情：
<div class="message messageerror">
<strong>There were errors with your registration:</strong>
<ul>Fields marked with * are required.</ul>
</div>
它将文本添加到内部 html。我希望它添加一个
这是我想要最终得到的HTML：
<div class="message messageerror">
<strong>There were errors with your registration:</strong>
<ul>
<li>Fields marked with * are required.</li>
</ul>
</div>
我也尝试过这个：
$('#fbsignup .message ul').add('<li>Fields marked with * are required.</li>');
它绝对没有任何作用。
我缺少什么？ .add 函数不适合在这里使用吗？
Seems like a simple thing to do (although im still learning the ins and outs of jQuery).
Here's my HTML:
<div id="fbsignup">
<div class="message messageerror">
<strong>There were errors with your registration:</strong>
<ul></ul>
</div>
</div>
Here's my (attempted) jQuery:
// Check Required Fields.
$('#fbsignup input.required').each(function () {
if ($(this).val().trim() == '') {
$(this).next('em').html('*').show();
$('#fbsignup .message ul').add('li').html('Fields marked with * are required.');
}
});
And this is what it is doing to the DOM:
<div class="message messageerror">
<strong>There were errors with your registration:</strong>
<ul>Fields marked with * are required.</ul>
</div>
It's adding the text to the inner html. I want it to add a <li> element with the inner html of what i set - i thought this is how chaining works?
This is the HTML i want to end up with:
<div class="message messageerror">
<strong>There were errors with your registration:</strong>
<ul>
<li>Fields marked with * are required.</li>
</ul>
</div>
I also tried this:
$('#fbsignup .message ul').add('<li>Fields marked with * are required.</li>');
Which does absolutely nothing.
What am i missing? Is the .add function not the right thing to use here?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
您想使用
.appendTo(...)来实现此样式。$("").appendTo("#fbsignup .message ul").html("标有*的字段为必填项。");尝试一下。
You want to use
.appendTo(...)for this style.$("<li/>").appendTo("#fbsignup .message ul").html("Fields marked with * are required.");Try it.
尝试
$('#fbsignup .message ul li').addTry
$('#fbsignup .message ul li').add对我来说问题似乎是你正在使用一个名为 .add() 的函数
并且我认为没有这样的函数- 错误。可能您可以使用 .append() 来执行您的意愿 http://api.jquery .com/?ns0=1&s=append =)
对我来说，一个好的一般规则是事先在 Firebug 控制台上尝试一些东西（通过 FireFox）
The problem for me seems to be that you are using a function called .add()
and I don't think there is such function-wrong.Likely you can use .append() to do your will http://api.jquery.com/?ns0=1&s=append =)
A good general rule for me is to try stuff beforehand on the Firebug console (over FireFox)