时间戳

首页 > 解决方案 > 使用来自服务器的不同数据重复 div 块

jquery - 使用来自服务器的不同数据重复 div 块

问题描述

我正在学习如何使用 api 并使用它的数据，所以我尝试尽可能创建一个新闻提要。我已经能够从服务器获取响应，并将其适当地放在我的卡（div）中。

$.ajax({
        url:'https://newsapi.org/v2/top-headlines?country=ng&category=health&apiKey=06008e50d7cf47e68f9c9d084b9ed5e0',
        datatype:'jsonp',
        success:function(result){
            console.log(result);

            $.each(result.articles, function(i, item){

                console.log( i + '<br>' + item.title + '<br>' + item.content);
                var news_title = item.title;
                var news_content = item.content;
                var news_image = item.urlToImage;

                $('.card').append(`
                <div class="card-header">
                        <p> ${news_title} </p>
                    </div>
                    <div class="card-content">
                        <p id="news-content"> ${news_content} </p>
                    </div>

                `)

我希望每张卡片（包括兄弟姐妹）以内联块格式相互重复。

注意：帖子标题带有#0B486B颜色

在此处输入图像描述

标签： jqueryhtmlapi

解决方案

你应该有一个 div（比如说 .container），并且在那个 div 中你应该在一个 div 后面加上 .card + .d-inline-block 类。根据您的代码，它应该是这样的：

$.ajax({
        url:'https://newsapi.org/v2/top-headlines?country=ng&category=health&apiKey=06008e50d7cf47e68f9c9d084b9ed5e0',
        datatype:'jsonp',
        success:function(result){
            console.log(result);

            $.each(result.articles, function(i, item){

                console.log( i + '<br>' + item.title + '<br>' + item.content);
                var news_title = item.title;
                var news_content = item.content;
                var news_image = item.urlToImage;

                $('.container').append(`
                <div class="card d-inline-block">
                  <div class="card-header">
                        <p> ${news_title} </p>
                    </div>
                    <div class="card-content">
                        <p id="news-content"> ${news_content} </p>
                    </div>

                `)

旧的（和一般的）答案：

不确定我是否理解你，但似乎你可以使用引导类进行浮动以获得期望的效果。

由于您没有标记 CSS，因此您可以使用 jQuery 来实现这一点

 $('.card').addClass('float-left');

$('.card').addClass('d-inline'); 使用 CSS，您可以添加以下内容：

.card {display: inline-block;}

或者

.card {float: left;}

编辑

Bootstrap 保持类用于内联显示......所以：

 $('.card').addClass('d-inline');

或者

 $('.card').addClass('d-inline-block');

推荐阅读