jQuery修改DOM结构

来源:互联网 发布:php array判断 编辑:程序博客网 时间:2020/10/20 17:16

除了列出的3种语言外,请再添加Pascal、Lua和Ruby,然后按字母顺序排序节点:

<!-- HTML结构 --><div id="test-div">    <ul>        <li><span>JavaScript</span></li>        <li><span>Python</span></li>        <li><span>Swift</span></li>    </ul></div>
var ul = $('#test-div>ul');    var lan = ['Pascal','Lua','Ruby'];    //获取原来的内容    var n = ul.find('span').map(function(){        return $(this).text();   //$(this)转成jQuery对象    }).get();    //把原来的内容和新内容结合起来,然后排序    lan = lan.concat(n).sort();    //加入html标签,转化成字符串    var strlan = lan.map(function(a){        return '<li><span>'+ a + '</span></li>';    }).join('');    //更改ul的结构    ul.html(strlan);
// 测试:;(function () {    var s = $('#test-div>ul>li').map(function () {        return $(this).text();    }).get().join(',');    if (s === 'JavaScript,Lua,Pascal,Python,Ruby,Swift') {        alert('测试通过!');    } else {        alert('测试失败: ' + s);    }})();
0 0
原创粉丝点击