Question

我有下一个代码：

<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>');
    }
});

当在另一行中点击手风琴时，我想用<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不是吗？

Answer 1

您必须重做为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将使用原生的document.getElementById方法，该方法将使用id返回第一个找到的元素。

<强>更新

根据您的新编辑，您需要使用没有空格的选择器：

$("div#2").append('<p>Test</p>');

虽然您不需要包含选择器的div部分。只需使用：

$("#2").append('<p>Test</p>');

虽然HTML5确实允许id以数字开头（并且长度为1个字符），但我建议使用更具描述性的id，就像之前我说的那样：“content1”等。

更新2：

再看一遍，$("div #2")实际上也应该有效，因为id中<div>“2”的元素。从技术上讲，选择器应该工作。尽管如此，我仍然建议选择器不是数字，而是更具描述性。

使用您的代码，无论如何我都使用了更具描述性的选择器：http://jsfiddle.net/BrRPz/2/

Answer 2

在css中，id选择器是唯一元素。所以不要在页面中重复相同的ID

<div id="accordion">
    <h3 id="1">Row 1</h3>
    <div class="1"></div>
    <h3 id="2">Row 2</h3>
    <div class="2"></div>
    <h3 id="3">Row 3</h3>
    <div class="3"></div>
</div>

将脚本用作

$("div.2").append('<p>Test</p>');

注意： id选择器是唯一元素。

Answer 3

尝试$("div#2").append('<p>Test</p>');

$("div #2")将定位id='2'元素中<div>的元素，而$("div#2")定位<div> id='2'。

如何动态更改jquery ui手风琴的内容选项卡

3 个答案: