Как вывести каждый объект в цикле в уникальный контейнер?

Question

[Пашенька]

Добрый вечер,
Есть вот такой цикл. В нём мне нужно получать по каждому посту картинку, используя апи другого сайта. Делать это я хочу асинхронно с помощью аджакса, иначе это сильно тормозит загрузку страницы и меня не устраивает^^)
Оно то получает, то что мне нужно, но я не могу придумать(из-за своих чуть больше, чем никаких познаний js) как это помещать в див, который у меня в цикле, да так чтобы при каждой итерации объект попадал в "свой" див, а не в первый

<?php while ( $wp_query->have_posts() ) : $wp_query->the_post();
$title = $post->post_title;?>
<div id="qwe">этот див должен быть в цикле</div>
<script>
$.ajax({
  url: 'http://ws.audioscrobbler.com/2.0/?method=artist.getinfo&artist=<?php echo urlencode($title);?>&api_key=2b35547bd5675d8ecb2b911ee9901f59&format=json',
  success: function(data) {
$('#qwe').append("<img src=\"" + data.artist.image[2]["#text"] + "\">"); // вот тут проблема, 
//нужно, наверное, каждый объект класть в свой контейнер с уникальным айди типа qwe1,qwe2, ...
//потому как таким образом они все пытаются попасть в первый контейнер на странице.
//Как это сделать? Чтобы картинки, конечно, соответствовали своим постам, а не рандом
  }
})
</script>
<?php endwhile;?>

Не будучи специалистом, уверен, что это неверный подход, однако, меня вроде как устраивает)
Помогите с выводом на js, пожалуйста

Answer 1

[Евгений Петров]

Вы ведь не собираетесь вставлять N блоков с одинаковым id?))
Зачем вам N скриптов?

Цикл начался
<div class="artist" data-container="artist" data-title="<?php echo urlencode($title);?>">...</div>
Цикл закончился
<script>
var $Artist = function () {
	var url = 'http://ws.audioscrobbler.com/2.0/',
		options = {
			method: 'artist.getinfo',
			api_key: '2b35547bd5675d8ecb2b911ee9901f59',
			format: 'json'
		};

	$('[data-container="artist"]').each(function () {
		var $item = $(this);

		$.ajax({
			url: url + '?' + $.param(options) + '&artist=' + $item.data('title'),
			success: function(data) {
				$item.append($('<img>').attr('src', data.artist.image[2]['#text']));
			}
		})
	});
}();
</script>

Comments

[Пашенька]

это выглядит очень здорово спасибо большое) но в консольке пишет "Cannot read property 'image' of undefined" почему-то

[Евгений Петров]

@like-a-boss я пропустил имя параметра artist в запросе.

[Пашенька]

@Petroveg да, и не только;) я уже разобрался, спасибо ещё раз, It works fine)

[Евгений Петров]

@like-a-boss хммм... А что ещё забыл?

[Пашенька]

@Petroveg you my life saver

[Пашенька]

@Petroveg ещё метод продублировали

[Евгений Петров]

@like-a-boss да, это от невнимательности при копипасте — я не тестировал код:)

[Пашенька]

@Petroveg ну это понятно) я с ним дольше разбирался, чем вы его писали)

[Евгений Петров]

@like-a-boss это не страшно, потому как здесь есть:
IIFE
замыкания
сериализация
перестроение логики на data-атрибуты

Я бы без опыта сидел тупил покруче, чем вы:)

[Евгений Петров]

@like-a-boss ну это же я должен спросить, как у вас работает цикл, что вы в нём неверно код прописываете:) Я же в скрипте только из блоков data-title забираю, а ставите его туда вы.

[Пашенька]

@Petroveg всё верно, извиняюсь, я натупил)

[Пашенька]

@Petroveg а можно ещё один небольшой вопрос?)
как распространить действие этого скрипта на динамически создаваемые элементы на странице? элементы создаются по клику на a. Не смог разобраться

[Евгений Петров]

@like-a-boss примерно так — пусть $Artist будет объектом с единственным собственным методом, который будет обрабатывать полученные объекты. Можно при получении аргумента определять его тип, если строка — находить элементы по селекторам... Не хочу:)

В общем, создали объект — вызвали $Artist.get(ссылка_на_объект). Можно передать коллекцию, как это сделано при загрузке страницы.

Цикл начался
<div class="artist" data-container="artist" data-title="<?php echo urlencode($title);?>">...</div>
Цикл закончился
<script>
var $Artist = function () {
	var url = 'http://ws.audioscrobbler.com/2.0/',
		options = {
			method: 'artist.getinfo',
			api_key: '2b35547bd5675d8ecb2b911ee9901f59',
			format: 'json'
		};

	return {
		get: function ($items) {
			$items.each(function () {
				var $item = $(this);

				$.ajax({
					url: url + '?' + $.param(options) + '&artist=' + $item.data('title'),
					success: function(data) {
						$item.append($('<img>').attr('src', data.artist.image[2]['#text']));
					}
				});
			});
		}
	};
}();

$Artist.get($('[data-container="artist"]'));
</script>

[Пашенька]

@Petroveg неа, не срабатывает чего-то

[Евгений Петров]

@like-a-boss так я же телепат, мне чего стоит догадаться — так... Раз плюнуть:)

[Пашенька]

@Petroveg ну да) ладно, спасибо ещё раз в любом случае)

[Евгений Петров]

@like-a-boss dataType: 'json' не забыли в запросе?

[Евгений Петров]

@like-a-boss я вот забыл

[Пашенька]

@Petroveg :) я о нём и не помнил) более того я не понимаю о чём речь вовсе) у меня только как и у вас указан format:jason который мы тянем.
сказав не срабатывает, я имел ввиду, что для элементов которые присутствуют первично в структуре документа оно работает, но не срабатывает для далее динамически подгружаемых таких же эелементов

[Пашенька]

@Petroveg *json, опечатался

Answer 2

[Александр Зачиналов]

Ну если так же по простому, то пилите в сторону createElement и прибавляйте ему 1,2,3... как значение счетчика в этом же цикле

Comments

[Пашенька]

попробовал, что-то пошло не так)