jQuery 从我的 web 文件夹中的文本文件中读取并附加到 div答案

【问题标题】：jQuery read from text file in my web folder and append to divjQuery 从我的 web 文件夹中的文本文件中读取并附加到 div
【发布时间】：2013-01-11 00:55:47
【问题描述】：

我正在尝试从服务器上的文本文件中读取值（“img1.jpg”等）并附加到 div 以创建幻灯片放映。

唯一的问题是我需要第一个“幻灯片”来应用 .active 类。

这是我的文本文件的读取方式：

这是我要附加的 div，如下所示：

 <div class="carousel-inner">
   <!-- slide -->
     <div class="active item slide3 animated fadeInUpBig">
        <img src="img1.jpg" />
     </div>
   <!-- slide -->
     <div class="item slide3 animated fadeInUpBig">
        <img src="img2.jpg" />
     </div>                           
 </div>

这是我尝试过的：

$(function () {
var file = "gallery.txt"; // gallery.txt PATH

$('<div />'.load(file, function(data){ // dummy DIV to hold data 
    var line      = data.split('\n');
    var NofImages = line.length -1;        
    for( i=0; i < NofImages; i++ ){
        image = './cms/data/img/gallery/homepage/'+ line[i].split('|')[2];
        $(".carousel-inner").append("<div class='active item slide3 animated fadeInUpBig'><img src='+ image +' /></div>");
    }   
}

});

【问题讨论】：

你缺少一个右括号：$('<div />').load...

标签： javascript jquery html ajax

【解决方案1】：

$(function () {
    var file = "gallery.txt"; // gallery.txt PATH

    $('<div />').load(file, function(data){ // dummy DIV to hold data 
        var line      = data.split('\n'),
            NofImages = line.length -1,
            imageURL  = '';
        for( i=0; i < NofImages; i++ ){
            imageURL = './cms/data/img/gallery/homepage/'+ line[i].split('|')[2];
            $(".carousel-inner").append("<div class='item slide3 animated fadeInUpBig'><img src='"+ imageURL +"' /></div>");
        } 
        // NOW ADD THE .active TO FIRST ONE
        $('.carousel-inner').find('.item').eq(0).addClass('active');
    });
});

Difference between $.ajax() and $.get() and $.load()

【讨论】：

.find('.item:first') 产生更少的链式函数调用
另外，var image 应该在 for 循环之外声明，除了那个很好的答案。
@wired_in +1 声明
感谢 roXon！（和有线输入）
@wired_in 不，在 Pulse CMS 创建的文件中有一个额外的行（空的新行），所以第 N 行总是-1，可以很容易地在里面跳过for 循环，但也可以使用 -1

【解决方案2】：

如果你是零，那么添加一个类

var activeClass = i==0 ? "active " : "";
$(".carousel-inner").append("<div class='" + activeClass + "item...

【讨论】：

【解决方案3】：

试试这个：

$.get("gallery.txt").done(function(response) {
    var lines = response.split("\n");
    for (var i = 0; i < lines.length; i++) {
        var fragments = lines[i].split("|");
        var html = "<div class='item animated fadeInUpBig slide3'><img src='" + fragments[2] + "' /></div>";
        $(".carousel-inner").append(html);
    }

    $(".carousel-inner .item").eq(0).addClass("active");
});

【讨论】：