Делать .post на несколько объектов в Jquery на готовом

Question

Сейчас я пытаюсь отобразить несколько списков на странице и извлечь эту информацию с сервера с помощью Jquery. Код выглядит так:

<div class="list" name="category1" />
<div class="list" name="category2" />
<div class="list" name="category3" />

....

$(".list").ready(function(){
  $.post("/getData", "{name=category#}"
    function(data) {
      // Do something here to display the list
    }
  );
});

Если предположить, что / getData возвращает необходимые данные ul .... / ul html, как мне заменить текст в div на данные, отправленные обратно? Я пробовал разные варианты $ this.html (данных) без удачи. Кроме того, есть ли способ выбрать имя div для отправки в качестве параметра .post?

Answer 1

Для начала, у вас есть несколько ошибок в вашем коде. Событие ready должно использоваться в объекте документа, а не в классе списка. Кроме того, вы пропускаете запятую в вызове $ .post. Вот исправленный код с добавленным динамическим аспектом. Я не проверял его, но он должен работать, за исключением каких-либо незначительных изменений, которые могут потребоваться.

$(document).ready(function() {

  $('.list').each(function() {
    var list = $(this);
    $.post('/getdata', {category: list.attr('name')}, function(result) {
      list.html(result);
    });
  });

});

Answer 2

Попробуйте $(div[name=category1]).html(dataFromResponse);

Или, если вы хотите, чтобы один и тот же текст в каждом div: $(div.list).html(dataFromResponse);. Все зависит от вашего контекста, вы можете пропустить div, если у вас нет других соответствующих селекторов.

Редактировать на основе комментариев: вы имеете в виду что-то вроде этого?

// fetch new content
function getContentByCategory(name) {
    $.post(
      '/getData',
      {category: name},
      function(response) {  handleResponse(name, response); }
    );
}

// change the looks
function handleResponse(name, response) {
    $('div[name='+name+']').html(response);
}

// trigger it all
$('.list').each(function(){
    getContentByCategoryName($(this).attr('name'));
});