Динамические селекторы jQuery показывают div

Question

У меня есть набор динамических заголовков и скрытых div с идеей, что когда пользователь нажимает на заголовок, он переключает div внизу, чтобы показать / скрыть

все div имеют идентификатор в форме "div_x", где x генерируется динамически

Мне удалось использовать .each (), чтобы перебрать все div, начинающиеся с div_, и я могу .split часть идентификатора x, но я не уверен, как получить jquery, чтобы каждый заголовок отображался / скрывался соответствующий другой div

$('#[id^=div_]').each(function(){

    exploded_id = this.id.split("_");
    id = exploded_id[2];

    $("#"+this.id).click(function() {

      $("#div_body_"+id).slideToggle("slow");

   });

});

Я уверен, что кто-то сможет указать здесь на недостаток

Answer 1

почему бы не использовать живую функцию и не выбирать с помощью классов?Таким образом, вы можете динамически добавлять с помощью ajax любое количество элементов, которые затем автоматически принимают такое же поведение:

Answer 2

Ваш селектор неправильный, вам не нужно # перед селектором, начинающимся с атрибута:

$('#[id^=div_]')

Вместо этого должно быть одно из следующих:

$('[id^=div_]')
$('div[id^=div_]')

Кроме того, вы можете применить обработчик щелчков ко всей коллекции, здесь each () не требуется. Например:

$('div[id^=div_]').click(function(){
    var id = this.id.split("_").pop();
    $("#div_body_"+id).slideToggle("slow");
});