2013-03-21 4 views
0

Я пытаюсь добавить тег img в элемент div, если элемент div не имеет тега img уже. Каков наилучший способ использования? Я бы хотел увидеть ответ как в javascript, так и в jquery, чтобы он помог мне учиться, но один из них в порядке.Если div не имеет тега img, добавьте «no image» img в div (Javascript или JQuery)

Я сделал несколько попыток jquery с использованием .not() и .empty(), но я чувствую, что не думаю о нем правильно.

+0

Дайте нам ваши попытки jQuery. Мы добавим к нему лед. :) Добавить код – codeVerine

+0

может также быть чисто решение CSS – dfsq

+0

Решение CSS? На самом деле, я определенно заинтересован в этом. – Oneezy

ответ

3

Попробуйте это:

if($('#your_div').find('img').length==0){ 
    $('#your_div').prepend('<img src="img/your_image.jpg" />'); 
} 

DEMO

1

использование length и findimg тег ... да prepend..no делать другие sttuff

с помощью Jquery

if($('#divID').find('img').length > 0) { 
    //img present so do other stuff 
}else{ 
    var img=$('<img />',{src:"imgsrc.jpg"}); 
    $('#divID').prepend(img) 
}; 
+2

'Я бы хотел увидеть ответ как в javascript, так и в jquery, чтобы он помог мне учиться, но один из них в порядке.' – bipen

+0

вы правы, не заметили эту строку :) – dfsq

2
if ($("#myId img").length === 0) { 
    $("#myId").append("<img src=\"https://www.google.com/images/srpr/logo4w.png\" />"); 
} 

Use jQuery length

Не связывайтесь с чистым раствором JavaScript - это будет излишне сложным и, возможно, склонны к кросс-браузерной несовместимости

3

Чистый JavaScript не так элегантно, как JQuery

var imgexists = false; 
for (var i = 0; i < mydiv.children.length; i++) { 
    if (mydiv.children[i].tagName.toLowerCase() == "img") { 
     imgexists = true; 
     break; 
    }; 
}; 

if (!imgexists) { 
    var img = document.createElement("img"); 
    img.src = "some/path.png"; 
    if (mydiv.children.length > 0) { 
     mydiv.appendChild(img, mydiv.firstChild); 
    } else { 
     mydiv.appendChild(img); 
    }; 
}; 
+0

+1 хороший. нет необходимости перегрузки объектов jquery. – Avishek

3

Хорошо, у вас есть отличные решения jQuery, поэтому я предлагаю чистую версию JS:

var div = document.getElementById('div'); 

if (!div.querySelector('img')) { 
    var img = document.createElement('img'); 
    img.src = 'image.png'; 
    div.insertBefore(img, div.firstChild); 
} 

Тесты: http://jsfiddle.net/9V2HR/

Как вы можете видеть, ванильный JS почти такой же короткий, как код jQuery в этом случае.