0

我有下一个代码：

<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

这似乎是一个错误http://bugs.jqueryui.com/ticket/4469#comment:4不是吗？

4

3 回答 3

2

您必须重做为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”的元素在 a 中<div>。所以从技术上讲，选择器应该可以工作。尽管如此，我仍然建议使用不是数字且更具描述性的选择器。

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

于 2013-04-12T02:40:32.067 回答
0

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

$("div #2")将以元素id='2'内部为目标<div>，而以 a为$("div#2")目标。<div>id='2'

于 2013-04-12T02:47:52.480 回答
0

在 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 选择器是唯一元素。

于 2013-04-12T02:41:31.770 回答