общий размер счетчика

Question

У меня есть несколько данных, и я пытаюсь получить их из firestore в div с назначением идентификатора (т. Е. Slide-1).Как я могу создать индекс каждого div как слайд-1, слайд-2 .....

Также при загрузке вся информация показывается как прикрепленное изображение.Я должен вызвать некоторые действия, чтобы работать должным образом (может быть руководство окна изменения размера)

JQuery

docRef
    .orderBy("order")
    .get()
    .then(querySnapshot => {
      totalRecords = querySnapshot.size;
      console.log(totalRecords);
      querySnapshot.forEach(doc => {
        const data = doc.data();
        // console.log(data.title);

        const slide =
          `
        <div id="slide-`+ 1 +`" class="slide fullbleed prt"><div
            class="bg-image"
            style="background-image: url(`+ data.imgPath + `);"
          />
          <div class="screen" />
          <div class="wrap">
            <div class="entry">
              <h2>`+ data.title +`</h2>
              <h4>`+ data.tagline +`<//h4>

              <span
                class="play-button button"
                data-vimeo-id="`+ data.vimeo +`"
                data-vimeo-iframe='&lt;iframe src="https://player.vimeo.com/video/`+ data.vimeo +`?dnt=1&amp;app_id=122963" width="1920" height="1080" frameborder="0" title="Hennessy X.O - The Seven World" allow="autoplay; fullscreen" allowfullscreen&gt;&lt;/iframe&gt;'
              >
                Play
              </span>
            </div>
          </div>
        </div>;
        `;

        $(".slideshow").append(slide);
      });
    });
  };

Answer 1

Создайте переменную count перед foreach и увеличивайте ее с каждым foreach.Затем замените 1 на количество.

docRef
    .orderBy("order")
    .get()
    .then(querySnapshot => {
      totalRecords = querySnapshot.size;
      console.log(totalRecords);
      let count = 0;
      querySnapshot.forEach(doc => {
        const data = doc.data();
        // console.log(data.title);
        count++;
        const slide =
          `
        <div id="slide-`+ count +`" class="slide fullbleed prt"><div
            class="bg-image"
            style="background-image: url(`+ data.imgPath + `);"
          />
          <div class="screen" />
          <div class="wrap">
            <div class="entry">
              <h2>`+ data.title +`</h2>
              <h4>`+ data.tagline +`<//h4>

              <span
                class="play-button button"
                data-vimeo-id="`+ data.vimeo +`"
                data-vimeo-iframe='&lt;iframe src="https://player.vimeo.com/video/`+ data.vimeo +`?dnt=1&amp;app_id=122963" width="1920" height="1080" frameborder="0" title="Hennessy X.O - The Seven World" allow="autoplay; fullscreen" allowfullscreen&gt;&lt;/iframe&gt;'
              >
                Play
              </span>
            </div>
          </div>
        </div>;
        `;

        $(".slideshow").append(slide);
      });
    });
  };