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

标签： javascript

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>