如何获得最近的第一个帖子和第二个…把他们在一个幻灯片显示在博客模板

Question

我有一个引导滑块，显示最近的帖子，我想要得到3个帖子的标题和图像，并把他们放在img scr和p中，我想把每个项目单独带来，以便能够把它放在代码里面

 <div class='flex-grow widget-inner'>
 
                  
                       <div class='carousel slide' data-bs-ride='carousel' id='carouselExampleCaptions'>
  <div class='carousel-indicators'>
    <button aria-current='true' aria-label='Slide 1' class='active' data-bs-slide-to='0' data-bs-target='#carouselExampleCaptions' type='button'/>
    <button aria-label='Slide 2' data-bs-slide-to='1' data-bs-target='#carouselExampleCaptions' type='button'/>
    <button aria-label='Slide 3' data-bs-slide-to='2' data-bs-target='#carouselExampleCaptions' type='button'/>
  </div>
  <div class='carousel-inner'>
    <div class='carousel-item active'>
      <img alt='...' class='d-block w-100' src='https://1.bp.blogspot.com/-qq6KbFXzexw/YHoA4BaCfBI/AAAAAAAAF-8/o93DIHz4xa4zMMyYfmX_hDEDrUUardirwCLcBGAsYHQ/s16000/%25D9%2585%25D8%25A8%25D8%25A7%25D8%25B1%25D8%25A7%25D8%25A9%2B%25D8%25A7%25D9%2584%25D8%25A3%25D9%2587%25D9%2584%25D9%2589%2B%25D9%2588%25D8%25A7%25D9%2584%25D8%25B2%25D9%2585%25D8%25A7%25D9%2584%25D9%2583%2B18-4-2021.webp'/>
      <div class='carousel-caption d-none d-md-block'>
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class='carousel-item'>
      <img alt='...' class='d-block w-100' src='https://1.bp.blogspot.com/-vYM4UIdLty4/YHnxtDr8IcI/AAAAAAAAF-0/1JR8EZpgtIEyRlW7sffau6ost0dVJWlaQCLcBGAsYHQ/s16000/%25D8%25A8%25D8%25AB%2B%25D9%2585%25D8%25A8%25D8%25A7%25D8%25B4%25D8%25B1%2B%25D8%25A8%25D8%25B1%25D8%25B4%25D9%2584%25D9%2588%25D9%2586%25D8%25A9%2B%25D9%2588%25D8%25A7%25D8%25AA%25D9%2584%25D8%25AA%25D9%258A%25D9%2583%2B%25D8%25A8%25D9%2584%25D8%25A8%25D8%25A7%25D9%2588%2B%2B%25D8%25A8%25D8%25AF%25D9%2588%25D9%2586%2B%25D8%25AA%25D9%2582%25D8%25B7%25D9%258A%25D8%25B9%2B%2B%25D8%25A7%25D9%2584%25D8%25A7%25D9%2586.webp'/>
      <div class='carousel-caption d-none d-md-block'>
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</p>
      </div>
    </div>
    <div class='carousel-item'>
      <img alt='...' class='d-block w-100' src='https://1.bp.blogspot.com/-RsLYxQ6LElo/YGFsiqK1zNI/AAAAAAAAF8s/PzyjKOyecNsDxVdxQ2GJ15fnJCESdXIigCLcBGAsYHQ/s16000/%25D8%25A7%25D9%2584%25D8%25AA%25D8%25B3%25D8%25AC%25D9%258A%25D9%2584%2B%25D9%2581%25D9%2589%2B%25D9%2584%25D9%2582%25D8%25A7%25D8%25AD%2B%25D9%2583%25D9%2588%25D8%25B1%25D9%2588%25D9%2586%25D8%25A7%2B%25D9%2583%25D9%2588%25D8%25B1%25D9%2586%25D8%25A71.webp'/>
      <div class='carousel-caption d-none d-md-block'>
        <h5>Third slide label</h5>
        <p>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class='carousel-control-prev' data-bs-slide='prev' data-bs-target='#carouselExampleCaptions' type='button'>
    <span aria-hidden='true' class='carousel-control-prev-icon'/>
    <span class='visually-hidden'>Previous</span>
  </button>
  <button class='carousel-control-next' data-bs-slide='next' data-bs-target='#carouselExampleCaptions' type='button'>
    <span aria-hidden='true' class='carousel-control-next-icon'/>
    <span class='visually-hidden'>Next</span>
  </button>
</div>
          </div>
         ```

Answer 1

你的问题不是很清楚。此代码创建图像和标题列表：

null

var items = document.querySelectorAll(".carousel-item"),
    list = [];

for(let i = 0; i < items.length; i++)
{
  let data = {};
  data.img = items[i].querySelector("img");
  data.title = items[i].querySelector(".carousel-caption > h5");
  list[list.length] = data;
}

console.log("Title from second post: ", list[1].title.textContent);
console.log("Image url from third post: ", list[2].img.src);
console.log("list of all posts:");
console.log(list);

html prettyprint-override"><div class='flex-grow widget-inner'>
 
                  
                       <div class='carousel slide' data-bs-ride='carousel' id='carouselExampleCaptions'>
  <div class='carousel-indicators'>
    <button aria-current='true' aria-label='Slide 1' class='active' data-bs-slide-to='0' data-bs-target='#carouselExampleCaptions' type='button'/>
    <button aria-label='Slide 2' data-bs-slide-to='1' data-bs-target='#carouselExampleCaptions' type='button'/>
    <button aria-label='Slide 3' data-bs-slide-to='2' data-bs-target='#carouselExampleCaptions' type='button'/>
  </div>
  <div class='carousel-inner'>
    <div class='carousel-item active'>
      <img alt='...' class='d-block w-100' src='https://1.bp.blogspot.com/-qq6KbFXzexw/YHoA4BaCfBI/AAAAAAAAF-8/o93DIHz4xa4zMMyYfmX_hDEDrUUardirwCLcBGAsYHQ/s16000/%25D9%2585%25D8%25A8%25D8%25A7%25D8%25B1%25D8%25A7%25D8%25A9%2B%25D8%25A7%25D9%2584%25D8%25A3%25D9%2587%25D9%2584%25D9%2589%2B%25D9%2588%25D8%25A7%25D9%2584%25D8%25B2%25D9%2585%25D8%25A7%25D9%2584%25D9%2583%2B18-4-2021.webp'/>
      <div class='carousel-caption d-none d-md-block'>
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class='carousel-item'>
      <img alt='...' class='d-block w-100' src='https://1.bp.blogspot.com/-vYM4UIdLty4/YHnxtDr8IcI/AAAAAAAAF-0/1JR8EZpgtIEyRlW7sffau6ost0dVJWlaQCLcBGAsYHQ/s16000/%25D8%25A8%25D8%25AB%2B%25D9%2585%25D8%25A8%25D8%25A7%25D8%25B4%25D8%25B1%2B%25D8%25A8%25D8%25B1%25D8%25B4%25D9%2584%25D9%2588%25D9%2586%25D8%25A9%2B%25D9%2588%25D8%25A7%25D8%25AA%25D9%2584%25D8%25AA%25D9%258A%25D9%2583%2B%25D8%25A8%25D9%2584%25D8%25A8%25D8%25A7%25D9%2588%2B%2B%25D8%25A8%25D8%25AF%25D9%2588%25D9%2586%2B%25D8%25AA%25D9%2582%25D8%25B7%25D9%258A%25D8%25B9%2B%2B%25D8%25A7%25D9%2584%25D8%25A7%25D9%2586.webp'/>
      <div class='carousel-caption d-none d-md-block'>
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</p>
      </div>
    </div>
    <div class='carousel-item'>
      <img alt='...' class='d-block w-100' src='https://1.bp.blogspot.com/-RsLYxQ6LElo/YGFsiqK1zNI/AAAAAAAAF8s/PzyjKOyecNsDxVdxQ2GJ15fnJCESdXIigCLcBGAsYHQ/s16000/%25D8%25A7%25D9%2584%25D8%25AA%25D8%25B3%25D8%25AC%25D9%258A%25D9%2584%2B%25D9%2581%25D9%2589%2B%25D9%2584%25D9%2582%25D8%25A7%25D8%25AD%2B%25D9%2583%25D9%2588%25D8%25B1%25D9%2588%25D9%2586%25D8%25A7%2B%25D9%2583%25D9%2588%25D8%25B1%25D9%2586%25D8%25A71.webp'/>
      <div class='carousel-caption d-none d-md-block'>
        <h5>Third slide label</h5>
        <p>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class='carousel-control-prev' data-bs-slide='prev' data-bs-target='#carouselExampleCaptions' type='button'>
    <span aria-hidden='true' class='carousel-control-prev-icon'/>
    <span class='visually-hidden'>Previous</span>
  </button>
  <button class='carousel-control-next' data-bs-slide='next' data-bs-target='#carouselExampleCaptions' type='button'>
    <span aria-hidden='true' class='carousel-control-next-icon'/>
    <span class='visually-hidden'>Next</span>
  </button>
</div>
          </div>