Как мы можем написать селектор jquery динамически?

Question

Я хочу добавить несколько div, используя jQuery, в основной div, называемый Activity-div, а затем добавить список в каждый div. Но пункты списка не одинаковы для каждого элемента. Поэтому я думаю, что мне нужно дать идентификатор каждому div, а затем, используя этот идентификатор, я могу получить доступ к div и поместить элементы списка в этот div. я использую этот код JQuery:

 for (i=0;i<obj.length;i++){
     $('#activity-div').append('<div class="area" id="area"'+i+'><h3><a href="#">'+obj[i].name+'</a></h3></div>');

      }

Предположим, длина объекта равна 5. Затем будет добавлено 5 делений. и их идентификаторы будут area1, area2, area3, area4 и area5. Мой вопрос, как я могу получить эти div по идентификатору, используя цикл. Я знаю, что div можно получить с помощью этого:

   ('#area1').append('<ul><li></li></ul>');

Я хочу получить доступ ко всем элементам div, которые я создал, используя цикл, а затем добавить в него список. Как я могу это сделать? какой будет синтаксис для этого? Я пытался

 ('#area'+i).append('<ul><li></li></ul>');

но это не сработало. Я новичок в jQuery и не могу найти онлайн-справку. Заранее спасибо.

Answer 1

$('#area'+i).append(); должно работать!

В вашем коде есть ошибка:

append('<div class="area" id="area"'+i+'><h3>

должно быть:

append('<div class="area" id="area'+i+'"><h3>

Answer 2

Проблема в цикле for, атрибут id неправильно добавляет к нему числовое значение.

С вашим текущим кодом он выйдет id="area"1 вместо id="area1"

Это правильный код:

* * 1010

Также, просто чтобы добавить больше к этому, в строках добавления внизу отсутствует идентификатор jQuery $, и он должен выглядеть как

$('#area1').append('<ul><li></li></ul>');

Answer 3

Пропустите идентификатор целиком и просто выберите по классу и индексу:

$("#activity-div .area").eq(i).append("<ul><li></li></ul>");

Или, что еще лучше, пропустите ненужный поиск jQuery и просто сохраните ссылку на элементы.

var areas = [];
for (i=0;i<obj.length;i++) {
    var area = $('<div class="area"><h3><a href="#">'+obj[i].name+'</a></h3></div>');
    $('#activity-div').append(area);
    areas.push(area);
}

Затем получите доступ к области по индексу:

areas[i].append("<ul><li></li></ul>");

Если возможно объединить ваши циклы в один, это было бы идеально:

for (i=0;i<obj.length;i++) {
    var area = $('<div class="area"><h3><a href="#">'+obj[i].name+'</a></h3></div>');
    area.append("<ul><li></li></ul>");
    $('#activity-div').append(area);
}

Но ни одно из этих решений на самом деледелает это для вас - нигде вы фактически не добавляете элементы списка.Я бы итерировал obj, используя $.each, а затем добавлял элементы списка в один и тот же цикл, избегая его повторения дважды.Как насчет этого, если предположить, что ваши элементы списка также содержатся в obj[i]:

$.each(obj, function () {
    var list = $('<div class="area"><h3><a href="#">'+this.name+'</a></h3><ul></ul></div>')
        .appendTo("#activity-div")
        .find("ul");
    $.each(this.listItems, function () {
        list.append("<li>" + this.Name + "</li>");
    });
});

Answer 4

Лучше всего встроить вставки DOM в строку и добавить их все одновременно. У вас также была ошибка в вашем коде, когда идентификатор был добавлен в DIV. Попробуйте это:

var insertion = "";
for (i=0;i<obj.length;i++){
    insertion += '<div class="area" id="area'+i+'"><h3><a href="#">'+obj[i].name+'</a></h3></div>';
}
$('#activity-div').append( insertion );

Answer 5

Предположим, длина объекта равна 5. Затем будет добавлено 5 делений. и их идентификаторы будут area1, area2, area3, area4 и area5 ...

Неправильно. Посмотрите на ваш код здесь:

for (i=0;i<obj.length;i++){
  $('#activity-div').append('<div class="area" id="area"'+i+'><h3><a href="#">'+obj[i].name+'</a></h3></div>');
}

Если существует 5 obj действий, они будут пронумерованы в соответствии с i. В цикле for вы получаете значения 0, 1, 2, 3 и 4, поскольку i++ не происходит до последнего шага перед повторением цикла (то есть происходит оценка i<obj.length до цикла, и i++ происходит после).

Исключая проблему с вашим id="area"'+i+' (это должно быть id="area'+i+'"), если вы ожидаете значения от 1 до 5, настройте цикл for соответствующим образом:

for( i=1; i<=obj.length; i++ ) {
  $('#activity-div').append('<div class="area" id="area'+i+'"><h3><a href="#">'+obj[i].name+'</a></h3></div>');
} 

Если вы хотите добавить список, вы можете сделать:

for( i=1; i<=obj.length; i++ ) {
  $('#activity-div').append('<div class="area" id="area'+i+'"><h3><a href="#">'+obj[i].name+'</a></h3></div>');
  $('#area'+i).append('<ul><li></li></ul');
}

Нет реальной причины создавать второй цикл for, и место размещения должно пытаться добавить к $('#area'+i) только после его создания. Если у вас есть проблемы, может помочь использование firefox с firebug. Вы можете добавить строки, такие как:

console.log( i );

В цикл for для отслеживания значения i при его увеличении по ступеням.

Answer 6

Вы также можете выбрать все id=area<num> деления с помощью селектора jQuery:

$('div[id^="area"]').append('<ul><li></li></ul>');

Выбирает все элементы div с идентификаторами, которые начинаются с "area", и добавляет к нему элемент ul.

Документы для селекторов jQuery можно найти здесь: http://api.jquery.com/category/selectors/