使用 jQuery 显示文本文件中的数据 [英] Display data from text file with jQuery
问题描述
我需要显示/附加来自文件 file.txt 的数据,该文件包含 400 行,格式如下:
http://www.exemple.com/img1.jpg,title1,subtitle1,description1;http://www.exemple.com/img2.jpg、title2、subtitle2、description2;http://www.exemple.com/img3.jpg、title3、subtitle3、description3;http://www.exemple.com/img4.jpg、title4、subtitle4、description4;http://www.exemple.com/img5.jpg,title5,subtitle5,description5;
我知道如何将 1 行附加到
我正在使用这个 jQuery 片段,它适用于每行 1 个元素并在行尾拆分.
$.get('file.txt', function(data) {//var fileDom = $(data);var lines = data.split("\n");$.each(lines, function(n, elem) {$('#display').append('<div><img src="' + elem + '"/></div>');});});
HTML 输出将是:
$('#display').append('<div class="container"><div class="left"><img src="' + src + '"/></div><div class="right">'+title+'<br/>'+副标题+'<br/>'+描述+'</div><;/div>');
感谢您的见解!
你的错误在于你拆分的方式...
你需要做这样的事情,(.when(file)
应该替换为 .get('file.txt')
:
var file = "http://www.exemple.com/img1.jpg, title1, subtitle1, description1; http://www.exemple.com/img2.jpg、title2、subtitle2、description2;http://www.exemple.com/img3.jpg、title3、subtitle3、description3;http://www.exemple.com/img4.jpg、title4,subtitle4,description4;http://www.exemple.com/img5.jpg,title5,subtitle5,description5;";函数 AppendImagesCtrl($) {$//.get('file.txt').when(file)//这是一个假的.then(file => file.split(/; ?\n? ?/)).then(lines =>lines.map((line, i) => {line = line.trim();如果(!行){ 返回";}让 [img,标题,副标题,描述] = line.split(/, ?n? ?/);返回 `<article id="${(i + 1)}"><h1>${title}</h1><img src="${img}" alt="${img}"/></文章>`;})).then(view => $('#example').append(view));}window.jQuery(document).ready(AppendImagesCtrl);
img { width: 100px;高度:50px;背景:青色;}文章 { 填充:5px 10px;背景:浅海绿;底边距:5px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="example"></div>
I need to display/append the data from a file, file.txt, containing 400 lines which are in the following format:
http://www.exemple.com/img1.jpg, title1, subtitle1, description1;
http://www.exemple.com/img2.jpg, title2, subtitle2, description2;
http://www.exemple.com/img3.jpg, title3, subtitle3, description3;
http://www.exemple.com/img4.jpg, title4, subtitle4, description4;
http://www.exemple.com/img5.jpg, title5, subtitle5, description5;
I know how to append 1 line into a <div>
. But, here we have 4 elements on each line. I need to turn them into 4 elements that I could use to display them.
I am using this jQuery snippet that works fine for each line with 1 element and splits at the end of the line.
$.get('file.txt', function(data) {
//var fileDom = $(data);
var lines = data.split("\n");
$.each(lines, function(n, elem) {
$('#display').append('<div><img src="' + elem + '"/></div>');
});
});
The HTML output would be:
$('#display').append('<div class="container"><div class="left"><img src="' + src + '"/></div><div class="right">' + title + '<br/>' + subtitle + '<br/>' + description + '</div></div>');
Thanks for insights!
Your error resides on the way you split...
You need to do something like that, (.when(file)
should be replaced with .get('file.txt')
:
var file = "http://www.exemple.com/img1.jpg, title1, subtitle1, description1; http://www.exemple.com/img2.jpg, title2, subtitle2, description2; http://www.exemple.com/img3.jpg, title3, subtitle3, description3; http://www.exemple.com/img4.jpg, title4, subtitle4, description4; http://www.exemple.com/img5.jpg, title5, subtitle5, description5;";
function AppendImagesCtrl($) {
$
// .get('file.txt')
.when(file) // this is a fake
.then(file => file.split(/; ?\n? ?/))
.then(lines => lines.map((line, i) => {
line = line.trim();
if(!line) { return ""; }
let [
img, title, subtitle, description
] = line.split(/, ?n? ?/);
return `<article id="${(i + 1)}">
<h1>${title}</h1>
<img src="${img}" alt="${img}" />
</article>`;
}))
.then(view => $('#example').append(view))
;
}
window.jQuery(document).ready(AppendImagesCtrl);
img { width: 100px; height: 50px; background: cyan; }
article { padding: 5px 10px; background: lightseagreen; margin-bottom: 5px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="example"></div>
这篇关于使用 jQuery 显示文本文件中的数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!