Question

我正在努力实现以下目标：

<div class="item">         
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3">IMG</div>
            <div class="col-md-9">TEXT</div>        
        </div>        
    </div>                    
</div>
<div class="item">         
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3">IMG</div>
            <div class="col-md-9">TEXT</div>        
        </div>        
    </div>                    
</div>

这是我到目前为止所做的：

var ws_ftr = data.ws_ftr.records;
    console.log(JSON.stringify(ws_ftr));
    jQuery.each(ws_ftr, function(index, ftr) {
        jQuery('.carousel-inner').append('<div class="item">');
        jQuery('.item').append('<div class="container-fluid">');
        jQuery('.container-fluid').append('<div class="row">');
        jQuery('.row').append('<div class="col-md-3"><img src="img/features_sliding/'+ftr[3] +'" alt="feature-'+ftr[2]+'"/></div><div class="col-md-9"><h2>'+ftr[2]+'</h2>'+ftr[1]+'</div>');

这给了我这个，我在第一个重大错误时停了下来，因为我相信其他人一旦修好就会得到纠正......

<div class="item">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3">IMAGE</div>
            <div class="col-md-9">TEXT</div>
            **<div class="col-md-3">IMG</div>
            <div class="col-md-9">TEXT</div>**

这不应该给我每个循环的col-md-3和col-md-9，而应该给我整个项块。

我是jQuery / javascript的新手，我正在学习。任何人都可以向我解释我做错了什么以及纠正的最佳方法吗？非常感谢！

Answer 1

1.单个.append()

中的多个.append()代替多个

jQuery('.carousel-inner').append('<div class="item"><div class="container-fluid"><div class="row"><div class="col-md-3"><img src="img/features_sliding/'+ftr[3] +'" alt="feature-'+ftr[2]+'"/></div><div class="col-md-9"><h2>'+ftr[2]+'</h2>'+ftr[1]+'</div></div></div></div>');

2.关闭你开始的所有div。

{{1}}

注意 - 似乎非封闭的div正在产生问题。

Answer 2

注意，在你的jQuery中，你永远不会关闭你的任何div。所以继续你的代码就可以这样完成：

   var ws_ftr = data.ws_ftr.records;
        console.log(JSON.stringify(ws_ftr));
        $.each(ws_ftr, function(index, ftr) {
            $('.carousel-inner').append('<div class="item">');
            $('.item').append('<div class="container-fluid">');
            $('.container-fluid').append('<div class="row">');
            $('.row').append('<div class="col-md-3"><img src="img/features_sliding/'+ftr[3] +'" alt="feature-'+ftr[2]+'"/></div><div class="col-md-9"><h2>'+ftr[2]+'</h2>'+ftr[1]+'</div>');
            $('.container-fluid').append('</div>');
            $('.item').append('</div>');
            $('.carousel-inner').append('</div>');

);

我相信这也可以通过这种方式完成：

   var ws_ftr = data.ws_ftr.records;
        console.log(JSON.stringify(ws_ftr));
        $.each(ws_ftr, function(index, ftr) {
            $('.carousel-inner').append('<div class="item"></div>');
            $('.item').append('<div class="container-fluid"></div>');
            $('.container-fluid').append('<div class="row"></div>');
            $('.row').append('<div class="col-md-3"><img src="img/features_sliding/'+ftr[3] +'" alt="feature-'+ftr[2]+'"/></div><div class="col-md-9"><h2>'+ftr[2]+'</h2>'+ftr[1]+'</div>');
);

Jquery .append。后如何格式化.each

2 个答案: