向嵌套类添加新元素

Adding new element to nested classes

本文关键字：元素 新元素 嵌套 添加      更新时间：2023-09-26

我需要使用 JS 在 HTML 中的特定嵌套类中创建一个新元素。所以在这个例子中，我需要创建一个新的跨度，只有"牧羊犬"类嵌套在"狗"中，才使用"paw-print"类

。

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

问题是我当前的JS首先适用于另一个实例，但不适用于另一个实例。我目前document.getElementsByClassName设置为"牧羊犬"，但只有当它在父"狗"类内时，我才需要定位该类。

我在这里错过了什么？

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

您的代码有 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);
 }

小提琴

如果你想附加到父级（带有类'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' 
});

如果你想附加到子（元素与类'牧羊犬'）

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

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

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

相关文章：