Question

我需要使用JS在HTML中的特定嵌套类中创建一个新元素。所以在这个例子中，我需要用＆＃34; paw-print＆＃34;类来创建一个新的span。只有＆＃34; collies＆＃34; class嵌套在＆＃34; dogs＆＃34;。

中

到目前为止我所拥有的内容：https://jsfiddle.net/p50e228w/6/

问题是我当前的JS在第一个实例上工作，但在另一个实例上没有。我目前将document.getElementsByClassName设置为＆＃34; collies＆＃34;但是我只需要在父母＆＃34;狗＆＃34;类。

我在这里缺少什么？

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，但我一直在使用vanilla JS，因为我是一个菜鸟，想要了解我的代码在做什么。

Answer 1

如果你想附加到父（带有'dog'类的元素）

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

除此之外，您还需要按照Rob。

的指示设置position: relative

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

Answer 2

您的代码有2个问题。

定位：图像被赋予绝对位置，并且它们基于页面布局处于相同位置。因此，为父容器设置相对定位。

<强> CSS

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); }查找您要查找的嵌套关系。

gradle clean assembleDebug

<强> Fiddle

向嵌套类添加新元素

2 个答案: