Как решить проблему дублирования в prependTo?

Question

[alex5e]

При загрузке изображения осуществляется ajax запрос и на выход отдается код с ссылкой на превью изображения, который добавляется в контейнер через prependTo.

'onComplete'=>'js:function(id, fileName, responseJSON){
                            if (responseJSON.success)
                            {
                                $.ajax({
                                    url: "/posts/renderPhoto",
                                    cache: false,
                                    type: "POST",
                                    data: {fileName: responseJSON.filename},
                                    success: function(data)
                                    {
                                    	var result = jQuery.parseJSON(data);

                                        $(result.html).prependTo(".qq-upload-success");

                                    }

Проблема дублирования возникает оттого, что при мультизагрузке изображений prependTo добавляет превьюшку найденного изображения в каждый селектор .qq-upload-success. Можно ли это как-нибудь обойти?

Answer 1

[Юрий Лобанов]

jsfiddle.net/iiil/B6cCF/8
Вот в примере в разметке 5 блоков. В трех из них есть картинка, в остальных нет.
Соответственно в тех, в которых картинки нет добавляется синяя картинка. То есть в примере показано как сделать проверку. Соответственно, Вы можете использовать это решение, оно будет работать. Но скорее всего Вам нужно каким-то образом это все делать по-другому, то есть обращаться к последнему элементу, как Вам показали в другом ответе.
Трудно сказать, почему он у Вас не сработал, так как нет возможности протестировать.

Comments

[alex5e]

Решил проблему дублирования, вынесением элементов, выводимых в prependTo в другой div

[Юрий Лобанов]

@s77lanselot77s так а при следующем добавлении как? Скажем Вы вносите в div с другим классом, скажем qq-upload-success-new, но при след. добавлении таких дивов будет уже два и в каждый добавится картинка.

[alex5e]

Я через prependTo выношу только картинки в div, а сам div не дублируется. А в классе qq-upload-success проблема была в том, что при каждом ajax запросе создавался новый qq-upload-success и картинки дублировались.

[Юрий Лобанов]

@s77lanselot77s на будущее - пишите, что вопрос закрыт. Я ведь спросил у Вас, решили или нет вопрос. В итоге зря делал.

[alex5e]

Простите, а как закрыть вопрос?

[Юрий Лобанов]

@s77lanselot77s можно добавить в темп, можно написать свое решение и отметить его решением - это будет вернее всего. возможно потому кому-нибудь понадобится такая информация. Кстати, все можно было сделать вот так:

$(result.html).prependTo($('.qq-upload-success:not(:has(img))'));

jsfiddle.net/iiil/B6cCF/11

[Юрий Лобанов]

@s77lanselot77s ну, мне опыт. Сначала нагородил свое решение, потому подумал и использовал с умом jq.

Answer 2

[Юрий Лобанов]

либо проверяйте наличие в элементе потомка с селектором img, или обращайтесь к последнему элементу набора.

Comments

[alex5e]

Извините, а можно примерчик?

[alex5e]

попробовал так..
if($(".qq-upload-success").children().is("img")==false)
$(result.html).prependTo(".qq-upload-success");

Не помогло. При мультизагрузке выводит к разным картинкам одну и туже превьюшку

[Юрий Лобанов]

просто children('img') попробуйте. я с телефона, только завтра смогу посмотреть и пример сделать.

[alex5e]

Так тоже не работает

[Юрий Лобанов]

@s77lanselot77s решили вопрос?

[alex5e]

К сожалению, нет

Answer 3

[Вадим Яковлев]

$(".qq-upload-success").eq($(".qq-upload-success").size()-1).prepend(result.html);

Comments

[Pozadi]

api.jquery.com/last

[Вадим Яковлев]

@Pozadi или так, да