理想情况下,我想使用bottom-border
分割不同的标题(及其图像)。试过这个,但它在图像上放置了一个边框,而不是标题之间。
的jQuery
$(document).ready(function() {
$.ajax({
url: "https://newsapi.org/v2/top-headlines?sources=the-sport-bible&apiKey=7822ca100cdf43e1a85e1e101aa69c06",
method: "GET",
success: function(data) {
processData(data);
}
});
function processData(data) {
var articleItems = [];
for (var i = 0; i < 5; i++) {
var author = data.articles[i].author;
var title = data.articles[i].title;
var description = data.articles[i].description;
var urlToImage = data.articles[i].urlToImage;
var artUrl = data.articles[i].url;
var $author = `<div class="author">Author: ${author}</div >`
var $title = `<a href="${artUrl}"><div class="title">${title}</div ></a>`
var $description = `<a href="${artUrl}"><div class="description">${description}</div></a>`
var $urlToImage = `<a href="${artUrl}"><img class="urlToImage" src="${urlToImage}">`;
$("#sport_news").append(`${author}${$title}${$description}${$urlToImage}`);
$("#sport_news").append("<br />");
console.log(artUrl);
}
}
});
HTML
<div class="tab-pane fade" id="sport">
<h3>SPORT</h3>
<p id="sport_news"></p>
</div>
答案 0 :(得分:2)
在您附加html的地方下方添加顶行和底行:
$("#sport_news").append("<div style='border-bottom: 2px solid;' >");
$("#sport_news").append(`${author}${$title}${$description}${$urlToImage}`);
$("#sport_news").append("<br />");
$("#sport_news").append("</div>");
此代码使用内联样式,因此您应该将一个类添加到div并将样式移动到那里。
最佳做法是将一个类属性添加到div中,如:
$("#sport_news").append("<div class='headline'>");
在外部样式表中定义您的类,如:
.headline
{
border-bottom: 2px solid;
}