Question

我有一个包含多行的文本文件，我需要将其加载到不同的div中。文本文件如下所示：

Jon
Doe
25

Jane
Doe
37

Foo
Bar
18

如何加载此文件并填充以下div？

<input id="firstname" type="text"></input>
<input id="lastname" type="text"></input>
<input id="age" type="text"></input>

<input id="firstname1" type="text"></input>
<input id="lastname1" type="text"></input>
<input id="age1" type="text"></input>

<input id="firstname2" type="text"></input>
<input id="lastname2" type="text"></input>
<input id="age2" type="text"></input>

使用

加载div

   $(".myDiv").load("myFile.txt");

使用json或csv也不是不可能的......

Answer 1

var strings = fileTextBlob.split('\n');
$(".myDiv").children("input").each(function(index, inputEl){
    var tmpStr = strings.shift();
    //Catch empty lines. Could add more logic to catch strings of all spaces, etc.
    while(!tmpStr && typeof(tmpStr) !== "undefined"){
        tmpStr = strings.shift();
    }
    $(inputEl).text(tmpStr);
})

Answer 2

将数据排列为json对象数组

var data = [
  {
    "firstname": "Jon",
    "lastname": "Doe",
    "age": 25
    },  {
      "firstname": "Jone",
      "lastname": "Doee",
      "age": 21
    }
  ]

然后使用JQuery，您可以构建div

var body = $('body');
$.each(data, function(index, value){
  body.append($('<input type="text" id="firstname' + index + '" >').text(value.firstname));
  body.append($('<input type="text" id="lastname' + index + '" >').text(value.lastname));
  body.append($('<input type="text" id="age' + index + '" >').text(value.age));
}

编辑 - 您可以使用getJSON加载json文件

$.getJSON( "ajax/test.json", function( data ) {
  var items = [];
  $.each( data, function( key, val ) {
    items.push( "<li id='" + key + "'>" + val + "</li>" );
  });

  $( "<ul/>", {
    "class": "my-new-list",
    html: items.join( "" )
  }).appendTo( "body" );
});

Jquery将文本加载到div中 - 多个值/ div

2 个答案: