$.each(someData.split(',') => 返回连接的字符串，而不是项目数组答案

【问题标题】：$.each(someData.split(',') => returns concatenated string, instead of array of items$.each(someData.split(',') => 返回连接的字符串，而不是项目数组
【发布时间】：2010-12-31 09:31:04
【问题描述】：

我正在使用 asp.net mvc - ajax 和 jQuery... 我有一个名为“Books”的模型类型，其中包含一个属性“TableOfContents” 此属性包含以下格式的数据：

TableOfContents = "1,2,4,6,9,17,28";

Json 动作方法，返回的 Book 对象如下所示：

public JsonResult GetBook(int id) {
    return Json(_bookRepository.Current(id), .....AllowGet);
}

我想要显示的列表图像的以下样式。

在 C# (Razor) 中我可以做到这一点，

var splitted = Model.TableOfContents.Split(‘,’);
@foreach(var number in splitted) {
     <li><img src=”@Url.Content(“~/Content/Images/img-“ + number + “.gif”)” /> </li>
}

此代码 100% 有效并显示如上图所示的图像。

我想用 jQuery 做同样的事情，因为我使用 ASP.NET MVC Ajax 和 jQuery。这是我通过 jQuery 从 MVC 获取数据的 jQuery 脚本。

<script type="text/javascript">          
        function GetBook(id) {
            var url = '@Url.Content("~//Monthly/CurrentBook?id=")' + id;

            $.post(url,
            null,
            function (book) {
                $('#bookResult' + book.ID).html(
                '<a href="@Url.Content("~/BookDetails/")' + book.ID + '">Click to View Details</a>'
                + '<div><p style=" text-align:center;">'
                + '<a href="' + monthly.URL + '"><button style="background-image:url(@Url.Content("~/Content/Images/download-pdf.gif")); width:200px; height:70px;" /></a>'

+ '**<!-- Here I want to use jQuery Code for displaying Table of content Images -->**'

                + '</p></div>');                
            },
           'json'
       );
        }

</script>

我使用这样的 jQuery 代码：

$.each(book.TableOfContents.split(','), function(number) {
  + '<li><img src="img-' + number + '.gif" /></li>'
}

但它显示结果为：“1,2,3,17,90”（以字符串格式而不是显示图像）

在 ASP.NET MVC Razor 中，我可以像这样显示图像列表：

  var splitted = Model.TableOfContents.Split(‘,’);
        @foreach(var number in splitted) {
             <li><img src=”@Url.Content(“~/Content/Images/img-“ + number + “.gif”)” /> </li>
        }

http://alhadith.cz.cc（此网站的主页显示带有 ASP.NET MVC Razor 的图像列表）

【问题讨论】：

该循环不是有效的 JavaScript，它应该出错，不显示任何内容，您可以发布您的实际代码/行为吗？...问题中的内容没有结帐。
您的其他六个问题中只有一个得到了可接受的答案？
我想将 TableOfContent 属性拆分为不同的项目（数组），并希望通过这些项目显示图像，因为我展示了我的 C#（ASP.NET MVC Razor）示例....该示例有效并显示
...中的图像分割字符串和用于显示不同图像的每个分割项....

【解决方案1】：

如果你有

var book={TableOfContents:"1,2,4,6,9,17,28"};

作为带有数据的对象，然后在 <head> 添加：

$(function(){

    $('#list').empty();
    var TableOfContentsSplit=book.TableOfContents.split(',');
    $.each(TableOfContentsSplit,function(number){
          $('#list').append('<li><img src="img-'+TableOfContentsSplit[number]+'.gif" /></li>\n');
    });

});

并在<body> 中添加：

<ul id="list"></ul>

最后你会得到：

<ul id="list">
<li><img src="img-1.gif"></li>
<li><img src="img-2.gif"></li>
<li><img src="img-4.gif"></li>
<li><img src="img-6.gif"></li>
<li><img src="img-9.gif"></li>
<li><img src="img-17.gif"></li>
<li><img src="img-28.gif"></li>
</ul>

干杯 G.

【讨论】：