我有一个引导滑块,显示最近的帖子,我想要得到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>
```
你的问题不是很清楚。此代码创建图像和标题列表:
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);
<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>