js实现对list列表的封装

JavaScript011

js实现对list列表的封装,第1张

/*

/**

/**

/*

/**

/**

/**

/**

/**

// 第一个元素索引

function front() {

this.pos = 0

}

// 最后一个元素的索引

function end() {

this.pos = this.listSize-1

}

// 向前移一个索引

function prev() {

if(this.pos==0){

return this.pos = 0

}

--this.pos

}

// 向后移一个索引

function next() {

if(this.pos<this.listSize-1){

++this.pos

}

}

// 当前的索引位置

function currPos() {

return this.pos

}

/**

/**

// 是否可以移到下一个索引位置

function hasNext() {

return this.pos<this.listSize

}

// 是否可以移到上一个索引位置

function hasPrev() {

return this.pos>=0

}

使用方法

var names = new List()

names.append('zhangsan')

names.append('lisi')

names.append('wangwu')

names.front()

names.next()

console.log(names.getElement()) // lisi

使用迭代器访问列表

for(names.front()names.hasNext()names.next()){

console.log(names.getElement())

}

//zhangsan lisi wangwu

你好！

你前台必须先有一个模板来接受数据,这个模板可以是你自定义的,假设你的数据对象是

1

data = [{"name":"张三", "age":"21"},{"name":"李四", "age":"21"},{"name":"<a href="https://www.baidu.com/s?wd=%E7%8E%8B%E4%BA%94&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1d9nj0YP1u9P1b3PjnduAFW0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6K1TL0qnfK1TL0z5HD0IgF_5y9YIZ0lQzqlpA-bmyt8mh7GuZR8mvqVQL7dugPYpyq8Q1DLPHfLrHmsPj6dnHR4PWRdPj6" target="_blank" class="baidu-highlight">王五</a>", "age":"21"}]

前台模板为

1

2

3

4

<div id="muban">

<ul id="ml">

</ul id="ml"></div id="muban">

数据操作为

1

2

3

4

5

for(var i = 0i <data.lengthi++){

var a = "<li>姓名：" + data[i].name + ",年龄: "+ data[i].age +"</li>"

var $ul = document.getElementById("ml")

$ul.append(a)

}