html名字设置成数组,2.1 利用数组在列表中显示名字（1）

第2章 数组和字符串

本章将讲述在jQuery中如何处理数组、映射和字符串。我们将学习以下攻略：

利用数组在列表中显示名字；

操作数组元素；

筛选数组，只显示所需数据；

为字符串和数值数组排序；

拆分数组；

合并数组；

把数值数组转换为字符串，查找子字符串；

创建对象数组；

为对象数组排序。

2.1　利用数组在列表中显示名字(1)

问题描述

请利用数组来显示名字列表。也就是说，假设有一个名字数组，请在网页上显示其元素。

解决方案

创建HTML文件，在名字列表的上方显示标题。该文件还包含一个空的段落元素，如下所示：

Members of my Group are

下面为段落元素添加数组中包含的名字。jQuery代码如下：$(document).ready(function() {

varmembers= [ "John", "Steve", "Ben", "Damon", "Ian" ];

$('p').text(members.join(", "));

});

1. 纵向显示名字

也可以纵向显示名字，jQuery代码如下：$(document).ready(function() {

varmembers= [ "John", "Steve", "Ben", "Damon", "Ian" ];

$('p').html(members.join("
"));

});

2. 显示名字及其在数组中的位置

为了显示名字及其在数组中的位置，需要修改HTML文件，包含空的有序列表元素，如下所示：

Members of my Group are

从数组中获取名字并追加到有序列表的jQuery代码如下：$(document).ready(function() {

varmemlist= $( "#list" );

varmembers= [ "John", "Steve", "Ben", "Damon", "Ian" ];

$.each(members,function( index, value ){

memlist.append($( "

" + value + "" ));

});

});

3. 利用HTML元素创建数组和计算数组长度

在这个解决方案中，假设名字列表以li元素形式存在于HTML文件中。获取所有存放在li元素的名字并保存到数组中，然后查找并显示数组中的名字的数目。包含li元素名字的HTML文件如下所示：

• John
• Steve
• Ben
• Damon
• Ian

在ul元素前面的段落元素用于显示名字的数目。目前，它没有包含文本。利用jQuery代码为它分配文本，与在li元素中名字的数目一起显示：$(document).ready(function() {

varnames= $("li").get();

$('p').text("Following are the " + names.length

+ " members of my Group");

});

【责任编辑：云霞 TEL：(010)68476606】

点赞 0