Добавление нового элемента в вложенные классы

Question

Мне нужно использовать JS для создания нового элемента внутри определенных вложенных классов в HTML. Поэтому в этом примере мне нужно создать новый диапазон с классом «paw-print» только там, где класс «collies» вложен в «собак».

Вот что я до сих пор: https://jsfiddle.net/p50e228w/6/

Проблема заключается в том, что мой нынешний JS работает по первой инстанции, но не на другой. В настоящее время у меня есть document.getElementsByClassName, установленный в «collies», но мне нужно настроить этот класс только тогда, когда он находится внутри родительского класса «собаки».

Что мне здесь не хватает?

var span = document.createElement("span"); 
span.className = "paw-print"; 
var wrap = document.getElementsByClassName("collies"); 
for(var i = 0; i < wrap.length; i++) { 
    wrap[i].appendChild(span); 
} 

Я могу использовать JQuery, но я использую ваниль JS только потому, что я такой нуб и хочу, чтобы понять, что делает мой код.

Answer 1

Есть 2 проблемы с вашим кодом.

• Позиционирование: изображения получают абсолютное положение, и они располагаются в том же положении, что и на макете страницы. Поэтому установите относительное позиционирование для родительского контейнера.

CSS

.relative { 
    position: relative; 
} 

• Вам нужно добавить, что родительский элемент, который collie здесь.

Вы можете использовать querySelectorAll, чтобы найти судно вложенного отношения, которое вы ищете.

Fiddle

Answer 2

Если вы хотите добавить к родителю (элемент с классом «собака»)

$('.dogs .collies').each(function() // finds elements in the dom with parent element 'dog' and it's child element 'collies' 
{ 
    $(this) // 'this' would represent 'collies' element 
.closest('.dogs') // .closest('.dogs') would get it's nearest occurence in the heirarchy (basically it's parent) 
.append($('<span/>', { class: 'paw-print'})); // create a dynamic span element and append to 'this' 
}); 

Если вы хотите добавить к ребенку (элемент с «колли» класса)

$('.dogs .collies').each(function() 
{ 
    $(this).append($('<span/>', { class: 'paw-print'})); 
}); 

В дополнение к этому, вам также необходимо установить position: relative, как указано Робом.

Пример: https://jsfiddle.net/DinoMyte/1zxn8193/1/