确定 jQuery 数组中的项目数并循环遍历它们？答案

【问题标题】：Determine # of items in jQuery array and loop through them?确定 jQuery 数组中的项目数并循环遍历它们？
【发布时间】：2012-02-08 02:28:52
【问题描述】：

我有一个 AJAX 脚本，它从 PHP 返回的 mySQL 查询接收字符串。然后解析这个字符串并将其放入 Jquery 中的一个数组中，然后使用 .html() 将结果打印到屏幕上

这个数组的长度从 0 项到很多项不等，我将如何计算数组中的项，然后循环遍历并将它们打印到屏幕上。

这是我根据以下建议更新的代码，但我仍然不确定 for 循环是在 .html() 函数内部还是外部？

更新后的代码包括 .each()

更新 2： 将 .html() 函数中的 (this) 替换为我想要写入文本的元素并且它正在部分工作，问题是现在它只打印最后一项数组？

更新 3： 似乎您只能运行一个 .html() 函数，例如，如果我在返回数组中最后一项的语句下添加另一个 .html() 语句它现在只会在屏幕上回显测试值。

$("#n_detail").html(partsArray[index]+"<br />").addClass('jText').fadeTo(900,1);
$("#n_detail").html("Test").addClass('jText').fadeTo(900,1);

它只会打印“Test”，而不是像以前那样打印数组中的最后一项？

<script type="text/javascript">
       $(document).ready(function() {
        $("#primary").change(function()
            {                                
             $.post("lib/ajax_load_job_detail.php",{ _primaryid_n:$(this).val() } ,function(data)
            {
            var string = data;
            var partsArray = string.split('|');
               $("#n_detail").fadeTo(200,0.1,function() //start fading the messagebox
               {
                 $.each(partsArray, function(index) {
                        $("#n_detail").html(partsArray[index]+"<br />").addClass('jText').fadeTo(900,1);
                    });     
                });
              });
            });
           });

数组partsArray[0]12/12/2005、partsArray[1]的样本值这是12月的样本注释等...

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

partsArray.length

将为您提供数组中的项目。您可以使用

循环

for(var i=0;i<partsArray.length;i++){

或使用 jquery 插件

$.forEach

【讨论】：

它仍然不会将数组的值返回到屏幕上，我想我正确设置了函数，但我不确定我是否将 for 循环放在 .html 函数内部或外部？这是我的代码：var string = data; var partsArray = string.split('|'); $("#n_detail").fadeTo(200,0.1,function() { for(var i=0;i<partsArray.length;i++){ $(this).html(partsArray[i]+"br />").addClass('jText').fadeTo(900,1); } ........

【解决方案2】：

如果你正在遍历一个数组，那么你可以使用 jQuery 函数 each()。

这是文档的链接：http://api.jquery.com/jQuery.each/

这是使用您的数组的文档示例：

$.each(partsArray, function(index, value) { 
  alert(index + ': ' + value); 
});

编辑 - 基于 OP 添加到另一个答案的评论，这是使用 OPs 代码的更好示例：

$.each(partsArray, function(index, value) { 
  value.addClass('jText').fadeTo(900,1);
});

EDIT 2 - 您需要循环内每个数组元素的代码部分，根据您的编辑，我认为它应该如下所示：

$.each(partsArray, function(index) {
    $(this).append(partsArray[index]+"br />").addClass('jText').fadeTo(900,1);
}

干杯，

詹姆斯

【讨论】：

感谢您的回复，这很有帮助。我在任何地方都需要 .html() 函数吗？我插入你的代码代替我的代码` $(this).html(partsArray[]).addClass('jText').fadeTo(900,1);`
谢谢刚刚看到它，这几乎就是我在阅读了一点关于 .each 之后的想法。我已经插入了您的代码，它在逻辑上非常有意义，但是当我运行它时，它不会将任何信息从数组写入屏幕。我在 Firebug 中看到的内容没有错误。我将在主帖中发布我上面的更新代码，以便您查看数组的示例值。
我认为解决方案是将 .html 更改为 .append - 当您第一次这样做时，这可能会开始看起来很有趣，因为您应该有足够的想法来完成您的代码。这是在 jquery 文档中附加的链接：api.jquery.com/append。我已经为您更新了我的最后一个编辑代码。 JL
詹姆斯，再次感谢您！花了一点时间才发现 DOM 只是在重写最后一个数组元素在其中写入的内容……再次感谢您的宝贵时间。干杯！

【解决方案3】：

这是一个典型的循环结构：

var partsArray = string.split('|');
for(var x=0;x<partsArray.length;x++) {
    //...your code ...
    //x is the index., so partsArray[x] is the current element
}

【讨论】：

【解决方案4】：

使用for ... in，它比jQuery 的$.each 方法快得多，并且没有太大区别 - 它为您提供i 中项目的索引，而不是值。

for (var i in partsArray)
{
    // You can access values via...
    console.log( partsArray[i] );

    // Alternatively, this will make it an exact clone of $.each
    var value = partsArray[i];
    console.log( value );
}

【讨论】：