您的位置 首页 php

动态数组,循环遍历,for each

单层遍历生成动态数组

html源码

 <ul class="ulBox">
    <li>香蕉</li>
    <li>苹果</li>
    <li>草莓</li>
    <li>西瓜</li>
    <li>火龙果</li>
</ul>  

js源码

 //单层遍历生成动态数组
var fruitsArr = []; //首先声明一个空数组
$(".ulArr").find("li").each(function(index){//通过each遍历ul中的每li标签
   fruitsArr[index] = $(this).text();//每遍历一个li标签就把其中的文本放到空数组中
})
console.log(fruitsArr);//遍历完成,打印出数组  ["香蕉", "苹果", "草莓", "西瓜", "火龙果"]  

多层循环生成动态数组

html源码

 <div class="varietyBox">
    <div class="varietyMain">
        <div class="varietyTitle">水果</div>
        <ul class="ulBox">
            <li>香蕉</li>
            <li>苹果</li>
            <li>草莓</li>
            <li>西瓜</li>
            <li>火龙果</li>
        </ul>
    </div>
    <div class="varietyMain">
        <div class="varietyTitle">蔬菜</div>
        <ul class="ulBox">
            <li>胡萝卜</li>
            <li>白菜</li>
            <li>芹菜</li>
            <li>西红柿</li>
            <li>菠菜</li>
            <li>南瓜</li>
        </ul>
    </div>
</div>  

js源码

 //多层遍历生成动态数组
var varietyArr = [];
var varietyObject = [];
var varietyLength = $(".varietyBox").find(".varietyMain").length;//获取最外层数组长度
var varietyUllength = 0;
for(var i = 0;i < varietyLength;i++){
   varietyUllength = $(".varietyBox").find(".varietyMain").eq(i).find(".ulBox").find("li").length;//获取第二层数组对应的长度
   var varietyUlarry = [];
   var varietyUlobject = {};
   for(var j = 0;j < varietyUllength;j++){
     varietyUlarry[j] = $(".varietyBox").find(".varietyMain").eq(i).find(".ulBox").find("li").eq(j).text();//数组
     varietyUlobject[j] = $(".varietyBox").find(".varietyMain").eq(i).find(".ulBox").find("li").eq(j).text();//对象
   }
   varietyArr[i] = varietyUlarry;
   varietyObject[i] = varietyUlobject;
}
console.log(varietyArr)//[["香蕉", "苹果", "草莓", "西瓜", "火龙果"], ["胡萝卜", "白菜", "芹菜", "西红柿", "菠菜", "南瓜"]]
console.log(varietyObject)//[{0: "香蕉", 1: "苹果", 2: "草莓", 3: "西瓜", 4: "火龙果"},{0: "胡萝卜", 1: "白菜", 2: "芹菜", 3: "西红柿", 4: "菠菜", 5: "南瓜"}]  

搬你想搬,盖你所需,码字不易,且行且珍惜!

文章来源:智云一二三科技

文章标题:动态数组,循环遍历,for each

文章地址:https://www.zhihuclub.com/80002.shtml

关于作者: 智云科技

热门文章

网站地图