Question

我有以下标记：

<div class="item-content" style="display: block;">
<div class="item-menu">
<div id="ajax-content-1" style="display: block; opacity: 0;">
<div class="content chapters current-tab">
<div class="right">
<div id="chapters-container-8" style="">
<div id="chapters-container-7" style="display: none">
<div id="chapters-container-6" style="display: none">
<div id="chapters-container-5" style="display: none">
<div id="chapters-container-4" style="display: none">
<div id="chapters-container-3" style="display: none">
<div id="chapters-container-25" style="display: none">
<div id="chapters-container-1" style="display: none">
</div>
</div>
</div>
</div>
</div>

这是一个ajax内容，我在页面上有几个。所以我想要做的是显示页面上可见的第一章容器如果我这样做：

var first_div = $('div[id^=chapters-container-]:first');
first_div.show();

它不起作用，因为它显示了页面上所有可见的章节容器div，我希望它只显示我加载的ajax内容的那个。我尝试过这样的事情：

var first_div = $('#ajax-content-' + id).closest('div[id^=chapters-container-]:first');
first_div.show();

和

var first_div = $('#ajax-content-' + id).children('div[id^=chapters-container-]:first');
first_div.show();

并且它不起作用。顺便说一下我知道var id，所以那里没有错误。它根本不能很好地选择我想要的东西。

Answer 1

您需要创建一个不在DOM中的jQuery元素，在那里附加来自AJAX请求的内容，然后对该元素执行选择。让我告诉你如何：

$.ajax({

// some ajax options etc.

success: function( data ) {
    var container = $('<div>').apppend(data),
    firstChapter = container.find('div[id^=chapters-container-]:first');
}

});

这样你就可以在DOM之外的元素上运行（BTW更快），你可以稍后将它们附加到任何你想要的地方。

顺便说一句，你可以给章节容器一个类，以便更容易和更快地选择。

使用jQuery AJAX获取动态生成内容的子元素

1 个答案: