顺序或者说优先级的重要性---解决dom生成问题有感

Posted 2020-10-28 喜欢的事用心去做

我们的大脑有逻辑，程序也有逻辑，只要一切都刚刚好，那么我们大脑的逻辑和程序的逻辑是没有冲突的；但是，有时候，我们想当然，只顾自己头脑中的逻辑，而随意臆想程序的逻辑，这个时候，就会有很多我们觉得不可思议的事情发生了。这篇文章的例子是一个同事问我的问题，他说自己程序有问题，他不知道为什么会这样。

这是代码，它原本的意图是通过遍历a数组，根据pid的不同，生成省份和城市对应的联动下拉， 但是，它是有问题的，你可以试着快速浏览下，看看是否能够瞬间找到问题所在：

var a = [
            {‘id‘:‘1‘,‘pid‘:‘0‘,‘name‘:‘陕西省‘},
            {‘id‘:‘2‘,‘pid‘:‘0‘,‘name‘:‘四川‘},
            {‘id‘:‘3‘,‘pid‘:‘1‘,‘name‘:‘咸阳市‘},
            {‘id‘:‘4‘,‘pid‘:‘1‘,‘name‘:‘宝鸡‘},
            {‘id‘:‘5‘,‘pid‘:‘0‘,‘name‘:‘重庆‘},
            {‘id‘:‘6‘,‘pid‘:‘2‘,‘name‘:‘成都‘}
        ];
        for(var i in a){
            if(a[i].pid == 0){
                var div = $(‘<div></div>‘);
                div.addClass(‘accordion-group‘);
                div.html(‘<div class="accordion-heading">‘+
                    ‘<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href=" ‘+a[i].id+‘"><i class="glyphicon glyphicon-plus"></i>‘+a[i].name+‘</a >‘+
                    ‘</div><div id="collapse‘+a[i].id+‘" class="accordion-body collapse" style="height: 0px; "><div class="accordion-inner"></div></div>‘);   
                for(var j in a){
                    if(a[j].pid == a[i].id){
                        console.log(a[j].name);
                        var div2 = $(‘<div></div>‘);
                        div2.html(‘<input type="radio" name="area" value="‘+a[j].name+‘" id="‘+a[j].id+‘"/><span>‘+a[j].name+‘</span>‘);
                        div2.appendTo(‘.accordion-inner‘);
                    }
                }
            }
            div.appendTo(‘#accordion2‘);
        }

我先简单理一下他的思路：

1，他是想整个省市联动都是动态生成的，最后，把这个块扔到页面中显示。

2，他希望生成省份的同时就把城市子项添加到省份下面。

再看看他实现时的思路：

1，遍历，动态生成省份元素。注意：此时，它还是个对象，没有容身之处，只存在于代码中，并没有被放到dom中。

2，当遍历一个省份时，再寻找与它对应的城市列表，然后，添加到城市下。但是，注意，他使用的是类名选择，这种选择方式只能选择已经存在于dom节点中的元素。而此时，刚刚生成的省份节点还未添加到页面中。所以，这一次的添加是失败的，因为没有选到任何东西。

在思考的过程中，忽视了程序的基本规则，所以会有不可思议的表现。

var a = [
            {‘id‘:‘1‘,‘pid‘:‘0‘,‘name‘:‘陕西省‘},
            {‘id‘:‘2‘,‘pid‘:‘0‘,‘name‘:‘四川‘},
            {‘id‘:‘3‘,‘pid‘:‘1‘,‘name‘:‘咸阳市‘},
            {‘id‘:‘4‘,‘pid‘:‘1‘,‘name‘:‘宝鸡‘},
            {‘id‘:‘5‘,‘pid‘:‘0‘,‘name‘:‘重庆‘},
            {‘id‘:‘6‘,‘pid‘:‘2‘,‘name‘:‘成都‘}
        ];
        for(var i in a){
            if(a[i].pid == 0){//当pid为0时代表个元素是省份，生成省份信息
                var div = $(‘<div></div>‘);
                div.addClass(‘accordion-group‘);
                div.html(‘<div class="accordion-heading">‘+
                    ‘<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href=" ‘+a[i].id+‘"><i class="glyphicon glyphicon-plus"></i>‘+a[i].name+‘</a >‘+
                    ‘</div><div id="collapse‘+a[i].id+‘" class="accordion-body collapse" style="height: 0px; "><div class="accordion-inner"></div></div>‘);   
                for(var j in a){//在生成一条省份信息的时候，查询该省份对应的城市元素，遍历生成城市信息，然后放到对应的省份下
                    if(a[j].pid == a[i].id){
                        console.log(a[j].name);
                        var div2 = $(‘<div></div>‘);
                        div2.html(‘<input type="radio" name="area" value="‘+a[j].name+‘" id="‘+a[j].id+‘"/><span>‘+a[j].name+‘</span>‘);
                        div2.appendTo(‘.accordion-inner‘);//放到对应省份的子项里面，注意，此时，这个城市对应的省份元素是还未被插入到页面中的，也就是说页面中是没有这个元素的。
                    }
                }
            }
            div.appendTo(‘#accordion2‘);//到这里省份信息才填充到页面中，也就是说页面中才有省份信息，所以第一遍循环里面，对应元素是获取不到的。所以，在第一次加载的时候是获取不到省份下面的城市信息的，当加载一次的基础上，再次执行才可以取到城市信息。
        }

 突然想起来我的博客名，喜欢的事认真去做，其实，喜欢的人和东西也要认真去了解。懂得了，才能更好的相处！加油吧，小小小喽啰O(∩_∩)O~