使用纯 JavaScript 获取不包含图形的元素

Question

>我正在尝试获取所有不包含图形的父项目。然后，我将遍历它，并将其中的图像包装在一个图中(如果该图尚不存在(。我已经成功地循环并将每个图像包裹在一个图形中，但是如果图形已经存在，我想跳过它。我希望只使用javascript而不是jquery。感谢您的任何帮助

.HTML

<div class="carousel-item active">
<figure class="figure-image">
<img src="https://via.placeholder.com/350x150" class="Image-1" alt="Second Slider Slide">
</figure>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/350x150" class="Image-2" alt="Second Slider Slide">
</div>

.JS

这个JS循环并将所有图像包装在一个图中，但如果按照我上面的例子已经存在一个图形，if将添加一个图形和方式，导致一个元素有两个图形。我认为解决方案是从一开始就抓住没有 .figure-images 的 carosuelItems，但我不确定该怎么做。

let carouselItem = [...document.querySelectorAll('.slider-image .carousel-item')]
for (let i = 0; i < carouselItem.length; i++) {
// Check to see if a figurea lready exists

// Create a figure for each class and add class to it.
let figure = document.createElement('figure')
figure.classList.add('figure-image')
// Get all images inside of the slider
let carouselImg = [...carouselItem[i].querySelectorAll('img')]
for (let img of carouselImg) {
// Insert the images into each figure
figure.insertAdjacentElement('afterbegin', img)
}
// Finally insert the figure with the image into each carousel slot
carouselItem[i].insertAdjacentElement('afterbegin', figure)
}

Answer 1

您可以使用如下内容检查元素是否具有子元素<figure>：carouselItem[i].querySelector("figure")

下面是一个完整的示例：

let carouselItem = [...document.querySelectorAll('.carousel-item')]
for (let i = 0; i < carouselItem.length; i++) {
if(!carouselItem[i].querySelector("figure")){
// Check to see if a figurea lready exists
// Create a figure for each class and add class to it.
let figure = document.createElement('figure')
figure.classList.add('figure-image')
// Get all images inside of the slider
let carouselImg = [...carouselItem[i].querySelectorAll('img')]
for (let img of carouselImg) {
// Insert the images into each figure
figure.insertAdjacentElement('afterbegin', img)
}
// Finally insert the figure with the image into each carousel slot
carouselItem[i].insertAdjacentElement('afterbegin', figure)
}
}

<div class="carousel-item active">
<figure class="figure-image">
<img class="Image-1" src="https://via.placeholder.com/350x150" alt="Second Slider Slide">
</figure>
</div>
<div class="carousel-item">
<img class="Image-2" src="https://via.placeholder.com/350x150" alt="Second Slider Slide">
</div>

Answer 2

这是来自MDN Web Docs：

"由于文档片段在内存中而不是主 DOM 树的一部分，因此将子项附加到它不会导致页面重排(计算元素的位置和几何形状(。从历史上看，使用文档片段可以带来更好的性能。

在我的代码中，我使用的是createDocumentFragment()方法。

let imgs = Array.from(document.querySelectorAll("img"));
for(let i = 0; i < imgs.length; i++){
let img = imgs[i]
let parentdiv = img.parentNode;
if(parentdiv.tagName.toLowerCase() == "figure"){
continue;
}else{

let fragment = document.createDocumentFragment();
let figureParent = document.createElement("figure");
figureParent.setAttribute("class","figure-image");
figureParent.appendChild(img)
fragment.appendChild(figureParent);
parentdiv.appendChild(fragment) 
}
}

figure{border:1px solid}

<div class="carousel-item active">
<figure class="figure-image">
<img class="Image-1" src="https://rpc.virtualhighschool.com/v3_demo/department/demo/course/ver-a/style_template_30/parts-of-a-cell.jpg" alt="Second Slider Slide">
</figure>
</div>
<div class="carousel-item">
<img class="Image-2" src="https://rpc.virtualhighschool.com/v3_demo/department/demo/course/ver-a/style_template_30/parts-of-a-cell.jpg" alt="Second Slider Slide">
</div>