我有下一个代码:
<div id="accordion">
<h3>Row 1</h3>
<div id="1"></div>
<h3>Row 2</h3>
<div id="2"></div>
<h3>Row 3</h3>
<div id="3"></div>
</div>
$("#accordion").accordion({
autoHeight: false,
clearStyle: true,
active: 0,
change: function(event, ui) {
$("div#2").append('<p>Test</p>');
}
});
当在另一行中单击 Accordion 时,我想填充 <div id="2">
与数据。在更改事件中,我正在尝试这样做:
$("div #2").append('<p>Test</p>');
但是文本“Test”打印在 h3 内而不是 div 中...我怎样才能实现在 div 上打印文本???
我使用的是jquery 1.9.0
这似乎是一个错误 http://bugs.jqueryui.com/ticket/4469#comment:4不是吗?
最佳答案
您必须重做为 id
设置的值属性。尝试:
<div id="accordion">
<h3 id="header1">Row 1</h3>
<div id="content1"></div>
<h3 id="header2">Row 2</h3>
<div id="content2"></div>
<h3 id="header3">Row 3</h3>
<div id="content3"></div>
</div>
这样,您就可以轻松定位:
$("#content2").append('<p>Test</p>');
(或实际使用 .append()
)
这是因为id
属性必须是唯一的,以便定位您实际想要的元素。 jQuery 将使用 native document.getElementById
方法将返回第一个找到的元素 id
.
更新:
根据您的新编辑,您需要使用不带空格的选择器:
$("div#2").append('<p>Test</p>');
尽管您不需要包含 div
选择器的一部分。只需使用:
$("#2").append('<p>Test</p>');
虽然 HTML5 确实允许 id
以数字开头(且长度为 1 个字符),我建议使用更具描述性的 id
,就像我之前说的:“content1”等。
更新2:
再看一遍,$("div #2")
实际上应该也可以工作,因为带有 id
的元素“2”位于 <div>
中。所以从技术上讲,选择器应该可以工作。尽管如此,我仍然建议使用一个非数字且更具描述性的选择器。
通过您的代码,我无论如何都可以使用更具描述性的选择器:http://jsfiddle.net/BrRPz/2/
关于javascript - 我如何动态更改 jquery ui Accordion 的内容选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15962179/