分组包裹节点

2012-08-26 08:08 7355 次阅读分类: JS+jQuery, 前端相关 2 条评论

免打扰阅读

需求：将10个span标签，每3个span标签为一组，余数(不足3个)的也算一组，每一组用Li标签包裹.

本人写过的方法有2种，一种是正则匹配，另一种是jq的节点操作。

正则实现方法：

提示：你可以先修改部分代码再运行。

jq节点操作方法：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>分组包裹节点</title> <style type="text/css"> *{margin:0;padding:0;} body{padding:50px;} span{width:50px; text-align:center;float:left;} ul li{clear:both;} </style> </head> <body> <p>需求：将10个span标签，每3个span标签为一组，余数(不足3个)的也算一组，每一组用Li标签包裹.</p> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var num=3;//num指要以几个span标签分为一组,调试可直接将num值代入下面的num引用中(数学中的代入法) var len; var arr=[]; var str="<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span>"; $("ul").html(str); len=$("ul").find("span").length; len=len%num==0? parseInt(len/num) : parseInt(len/num+1); //将每3个span分组，并放入数组中 for(var i=0;i<len;i++){ if(i==0){ arr[i]=$("ul").find("span:lt("+num+")");//匹配元素序数小于3的元素，即前3个span标签 }else{ ordinal=eval(num*i-1); arr[i]=$("ul").find("span:gt("+ordinal+"):lt("+num+")");//先定位匹配元素序数大于(3*1-1)的span所有标签这个对象，再针对当前这个对象取前3个即:lt(3)，注意链式操作对象的变化 } } //将每个数组元素都用li标签包住 $(arr).each(function(index, element) { $(arr[index]).wrapAll("<li/>"); }); }) </script> <ul></ul> </body> </html>

提示：你可以先修改部分代码再运行。

对于这种需求，其实归属于字符串操作，而字符串操作正是正则表达式的强项！而且从实现的代码上来看，也应该优先采用正则的方法去实现。
本文之所以提供jq的节点操作实现方法，纯粹是为了练手，熟悉下jq基本选择器的操作而已。

如有疑问可自行修改代码，再查看运行结果！