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

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

但文本“测试”打印在h3内而不是div ...我怎样才能实现在div上打印文本???

我正在使用jquery 1.9.0

这似乎是一个bug 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 “2” 是在<div> 从技术上讲，选择器应该工作。 尽管如此，我仍然建议选择器不是数字，而是更具描述性。

使用您的代码，无论如何我使用了更具描述性的选择器： 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")将在<div>元素内定位id='2'的元素，而$("div#2")定位id='2'的<div> 。