jQuery修改DOM结构

来源：互联网发布：php array判断编辑：程序博客网时间：2024/04/27 00:01

除了列出的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