Exemple jQuery

Crée des <div> cliquables à partir de données JSON

by FrostyZ

HTML

<h1>Actualités</h1>
<div id="news" />

CSS

* {font-family: Arial}
.news-item {cursor: pointer}

JavaScript

// Données (à charger en Ajax dans le tuto)

var JSON = [{
  titre: 'Une minute de silence a été observée après les attentats de Barcelone et Cambrils',
  date: '2017-08-18 13:20',
  'source': 'Le Figaro',
  'url': 'https://www.lefigaro.fr/international/2017/08/18/01003-20170818LIVWWW00004-attentats-a-barcelone-et-cambrils-13-morts-des-centaines-de-blesses-le-point-ce-vendredi-matin.php',
  texte: 'Josep Lluis Trapero, le chef de la police régionale, a indiqué dans l\'après-midi que le conducteur de la camionnette de Barcelone n\'était toujours pas identifié. Il n\'a pas exclu lors de sa communication qu\'il puisse faire partie des cinq «terroristes présumés» abattus par la police dans la nuit de jeudi à vendredi à Cambrils où une voiture à fauché plusieurs piétons.'
},
{
  titre: 'Près de 2.500 migrants évacués de campements de migrants dans le nord de Paris',
  date: '2017-08-18 13:10',
  'source': 'L\'Express',
  'url': 'https://www.lexpress.fr/actualites/1/actualite/2-459-personnes-evacuees-des-campements-dans-le-nord-de-paris_1936126.html',
  texte: 'Paris - Près de 2.500 migrants ont été évacués vendredi matin de campements sauvages installés depuis plusieurs semaines porte de La Chapelle, dans le nord de Paris, la 35e opération du genre en deux ans dans la capitale.\nLancée vers 06H00 et achevée peu après 11H00, cette action a permis la "mise à l\'abri" de 2.459 personnes, a déclaré à l\'AFP Didier Leschi, directeur général de l\'Office français de l\'immigration et de l\'intégration (Ofii).'
},
{
  titre: 'Incendie d\'un yacht de 40 mètres au large de Nice',
  date: '2017-08-18 13:00',
  'source': 'Ouest-France',
  'url': 'https://www.ouest-france.fr/faits-divers/incendie/un-yacht-de-40-metres-en-flamme-au-large-de-nice-5194041',
  texte: 'Un navire italien transportant 11 passagers et membres d’équipages s’est enflammé jeudi 17 août en début d’après-midi. Plusieurs bateaux se sont rendus sur place pour venir en aide au bateau. Il a finalement coulé vers...