向嵌套类添加新元素

Question

我需要使用JS在HTML中的特定嵌套类内创建一个新元素。 因此，在此示例中，仅在“ collies”类嵌套在“ dogs”中的情况下，我需要使用“ paw-print”类创建一个新跨度。

到目前为止，这是我所拥有的： https : //jsfiddle.net/p50e228w/6/

问题是我当前的JS在第一个实例上起作用，但在另一个实例上却不起作用。 我目前将document.getElementsByClassName设置为“ collies”，但仅当该类位于父“ dogs”类中时，才需要定位该类。

我在这里想念什么？

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

如果要追加到父项（元素为“狗”的元素）

$('.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' 
});

如果要追加到child（类为'collies'的元素）

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

除此之外，您还需要设置position: relative Rob指出的position: relative 。

范例： https : //jsfiddle.net/DinoMyte/1zxn8193/1/

Answer 2

您的代码有2个问题。

• 位置：图像被赋予绝对位置，并且根据页面布局它们位于相同的位置。 因此，请为父容器设置相对位置。

的CSS

.relative {
  position: relative;
}

• 您需要将其附加到此处是collie父元素。

您可以使用querySelectorAll查找所需的嵌套关系。

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

小提琴