Firestore索引计数器的总大小

Question

我有多个信息，并尝试从div中分配ID（即slide-1）的div获取。 如何创建每个div的索引，如slide-1，slide-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

在foreach之前创建一个count变量，并在每个foreach中将其递增。然后将1替换为count。

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);
      });
    });
  };