Получение дочерних элементов динамически сгенерированного контента с помощью jQuery AJAX

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, и у меня есть несколько на странице.Так что я хочу сделать, это отобразить 1-й контейнер главы, видимый на странице, если я сделаю это:

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

Вам необходимо создать элемент jQuery, которого нет в DOM, добавить туда содержимое запроса AJAX и затем выполнить выбор для этого элемента.Позвольте мне показать вам, как:

$.ajax({

// some ajax options etc.

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

});

Таким образом, вы работаете с элементами вне DOM (что, кстати, быстрее), а затем можете добавлять их куда угодно.

Итаким образом, вы можете дать контейнерам глав класс для более простого и быстрого выбора.