Как написать проверку элементов подгруженных асинхронно?

Question

[Пашенька]

Добрый вечер,
на странице изначально присутствуют такие элементы:

<div class="anything">
//здесь могут быть другие блоки
<img src"...">
</div>

Далее по событию происходит асинхронная подгрузка:

<div class="anything">
//здесь могут быть другие блоки
//без тэга img
</div>

После этой подгрузки необходимо для всех элементов div.anything, не имеющих img (т.е. вновь загруженных) выполнить действие(по добавлению этого тэга) и не выполнять его для тех элементов которые уже имеют этот тэг.
Как написать такую проверку по наличию внутри div.anything тэга img?

типа этого, только справедливую для новых элементов

if ($("img").parents("div.anything")) {
        //do nothing
    } else {
        //do something
    }

Answer 1

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

$.ajax({
	url: '...',
	success: function (data) {
		var data_ = $(data);

		data_.each(function () {
			if ($(this).hasClass('anything')) {
				if (!$(this).find('img').length) {
					$(this).append($('<img>').attr('src', 'нифига_не_знаю_откуда_его_брать'));
				}
			}
		});

		data_.appendTo(куда_то_там);
	}
});

Comments

[Пашенька]

@Petroveg спасибо, за очередную помощь) я пробую как-то так, но ничерта не выходит. приведу весь код подгрузки:

(function($) {
        $('#showmemore').on('click', 'a', function(e){
            e.preventDefault();
            $(this).addClass('loading').text('Loading...');
            $.ajax({
                type: "GET",
                url: $(this).attr('href') + '#loop',
                dataType: "html",
                success: function(out){
                    result = $(out).find('#loop .post');
                    nextlink = $(out).find('#showmemore a').attr('href');
                    $('#loop').append(result.fadeIn(300));
                    $('#showmemore a').removeClass('loading').html('<span class="plus">+</span>Show Me More Lyrics');
                    $('#showmemore a').attr('href', nextlink);
					
					var data_ = $(out);
					data_.each(function () {
						if ($(this).hasClass('artist')) {
							if (!$(this).find('img').length) {
					$Artist.get($('[data-container="artist"]' )); // здесь я пробую вызвать объект, который вы мне написали http://toster.ru/q/123675#comment_443183
							}
						}
					});
					
                }

            });
        });
})(jQuery)

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

@like-a-boss вы смешали 2 подхода, а за это в шведской кухне отрывают голову:)

1. Вот почему я не написал сразу data_.find('.anything')? И коротко, и просто. Но нет — я как дурак цикл пишу data_.each(...). Почему же я такой дурак? Потому, что вы получили фрагмент, который пока ещё не часть документа со всеми вытекающими.

2. Вам нужно искать пришедшую ссылку (кстати, почему с таким же id?) либо в цикле, либо после вставки данных в документ. И не нужно допускать наличие в документе нескольких элементов с одинаковым id.

3. Вы явно копируете откуда-то этот код, потому что в вашем случае лучше

$(function () {
	$(document).on('click', '#showmemore a', function (e) {
			// Тут код
	});
});

[Пашенька]

@Petroveg
1. видно же что я слабо понимаю, что творю
2. малопонятно, я вроде ищу после вставки данных в документ. не понял о каком id речь, если про artist, то это селектор. про id я вкурсе
3. разумеется копирую, удалив ненужное) почему искать по всему документу лучше, чем в конкретном контейнере?

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

@like-a-boss пришедшие данные добавляются или заменяют предыдущие?

[Пашенька]

@Petroveg добавляются

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

@like-a-boss тогда как понять

success: function(out){
	result = $(out).find('#loop .post');
	nextlink = $(out).find('#showmemore a').attr('href');
	$('#loop').append(result.fadeIn(300));
	...
}

Вы же получили данные в переменной out и пытаетесь в них найти #showmemore и #loop, что как я уже объяснял, делается не таким способом. И ладно, что вы не приучены к оператору var (и очень напрасно), потому что:

Блок #loop уже есть на странице, поскольку в него вы собираетесь вставить результат поиска в ответе.
И блок #showmemore также есть на странице, ведь загрузка пошла после клика внутри этого блока по ссылке.

Так что я вообще не понимаю — что вообще вы делаете.

[Пашенька]

@Petroveg попробую объяснить подробно:
тот скрипт, что я привёл полностью, не считая вашего кода по середине абсолютно рабочий:
по клику на ссылку в блоке #showmemore подгружает посты,
цикл вывода постов должен быть внутри id=loop class=post,
потом считывает nextlink - это функция перехода на след. страницу и после смены состояния приписывает её кнопке.
с этим скриптом всё в порядке.
я лишь хочу, чтобы для тех постов, которые подгружены этим скриптом, срабатывала та другая функция, которую вы написали, но не затрагивая те посты для которых функция уже отработала.

[Пашенька]

@Petroveg вот для такого шаблона скрипт работает

<div id="loop">
<div class="post">
<?php while ( $query->have_posts() ) : $query->the_post();
...
<div id="showmemore"><?php next_posts_link('Show Me More') ?>
</div>
</div>

[Пашенька]

@Petroveg вопрос как выполнять это
$Artist.get($('[data-container="artist"]' ));
только для вновь подгруженных данных и не выполнять для таких дата-контейнеров уже присутствующих

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

@like-a-boss я действовал бы вот примерно так

HTML

<div id="artists">
	<div class="list">
		<div class="anything" data-container="artist" data-title="Dousk">
			<strong>Dousk</strong>
		</div>
		<div class="anything" data-container="artist" data-title="Emma Louise">
			<strong>Emma Louise</strong>
		</div>
		<div class="anything" data-container="artist" data-title="Hidden Orchestra">
			<strong>Hidden Orchestra</strong>
		</div>
	</div>
	<div class="more" data-action="artist" data-url="1">+</div>
</div>

JS

var $Artist = function () {
		var imageURL = '/ajax/image.html',
			artistURL = '/ajax/artist.html',
			options = {
				method: 'artist.getinfo',
				api_key: '666',
				format: 'json'
			},
			next;

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

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

				$.ajax({
					url: artistURL + '?' + $link.data('url'),
					dataType: 'html',
					success: function (data) {
						var data_ = $(data);

						data_.each(function () {
							var $item = $(this);

							if ($item.is('[data-container="artist"]')) {
								_class.getImage($item);
							} else if ($item.is('[data-url]')) {
								$link.data('url', $item.data('url'));
							}
						});

						data_.appendTo(container);
					}
				});
			}
		};
	}(),
	container = $('#artists .list');

$Artist.getImage($('[data-container="artist"]'));

$(document).on('click', '[data-action="artist"]', function (e) {
	$Artist.getArtists($(this));
});

image.html

{
	"artist": {
		"image": [
			"",
			"",
			{
				"#text": "/pic/posters/185.jpg"
			}
		]
	}
}

artist.html

<div class="anything" data-container="artist" data-title="ATB">
	<strong>ATB</strong>
</div>
<div class="anything" data-container="artist" data-title="AIR">
	<strong>AIR</strong>
</div>
<div class="anything" data-container="artist" data-title="The Calm Blue Sea">
	<strong>The Calm Blue Sea</strong>
</div>
<div data-url="2"></div>

[Пашенька]

@Petroveg ваш код сам по себе конечно работает, но не применим к моей ситуации)

[Пашенька]

Евгений Петров спасибо за примеры кода, это помогло мне чуть понять синтаксис и написать своё простое решение.
п.с. надо начинать учить js