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循环遍历并将所有图像包装在图形中，但是如果按照我上面的示例已经存在图形，则将添加图形和方式导致一个元素包含两个图形。我认为解决方案是从一开始就抓住没有.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>

使用纯JavaScript获取不包含数字的元素

2 个答案: