Я пытаюсь использовать (https://www.npmjs.com/package/multi-clamp)[multi-clamp.js] для зажима / усечения моих заголовков, которые возвращаются из API Reddit.
Однако, он работает только над 1-ым перенастроенным заголовком, а невсе заголовки.Как я могу убедиться, что функция работает на всех заголовках, возвращаемых из API, а не только 1-го?
const reddit = "https://www.reddit.com/r/upliftingnews.json?raw_json=1&limit=10"
async function getData() {
try {
let response = await fetch(reddit);
let data = await response.json()
return data;
} catch (error) {
console.log("error", error);
}
}
getData()
.then(data => data.data.children)
.then(data => data.map(post => ({
source: post.data.domain,
author: post.data.author,
link: post.data.url,
img: (typeof (post.data.preview) !== 'undefined') ? post.data.preview.images[0].source.url : null,
title: post.data.title,
})))
.then(data => data.map(render))
const app = document.querySelector('#app');
const render = post => {
//console.log(post.data);
const node = document.createElement('div');
node.classList.add('news-item', `news-item--${ post.class }`);
node.innerHTML = `
<a class="news-item-link" href="${post.link}">
<div style="background-image: url('${post.img}')" class="news-item-bg"></div>
<div class="news-item-content">
<h3 class="news-item-source">${post.source}</h3>
<h2 class="news-item-title mb-2">${post.title}</h2>
</div>
</a>`;
app.appendChild(node);
new MultiClamp(document.querySelector('.news-item-title'), {
ellipsis: '...',
clamp: 2
});
}
new MultiClamp..
, где зажим работает на селекторе заголовков, ноэто только зажим первого возвращенного заголовка, а не всех.
Как заставить его работать на всех заголовках?