用jquery操作html，向
的第一li后面追加
的问题

TraineeFang 2014-01-17 11:18:12

<head runat="server">
<title></title>
<script src="js/jquery-1.6.2.js" type="text/javascript"></script>
<style type="text/css">
.subitem{ margin: 5px 0;width: 500px;float: left;border-right: #ddd 1px dotted; min-height:400px; }
.subitem ul{ width: 490px; margin: 0 0 0 10px; list-style: none; }
.subitem li{ width: 240px; line-height: 14px;overflow: hidden; }
</style>
<script type="text/javascript">
function OK() {
$("#my_sp").after("</ul><ul>");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" onclick="OK()" value="点吧" />
<div class="subitem">
<ul>
<li><a>烷烃及衍生物</a></li>
<li><a>烷烃及衍生物</a></li>
<li><a>烷烃及衍生物</a></li>
<li id="my_sp">
<a>看我后面是否被</ul><ul>分割开</a>
</li>
//注：我想在这个位置追加 </ul><ul> ,这样前面的</ul>与上面的配对，后面的<ul>后下面的</ul>配对
<li><a>烷烃及衍生物</a></li>
<li><a>烷烃及衍生物</a></li>
<li><a>烷烃及衍生物</a></li>
</ul>
</div>
</div>
</form>
</body>
问题是：浏览器好像自动将</ul><ul>解析配对，弄成了<ul></ul>,这样就反了，达不到效果?
我想之后变成这样：
<ul>
<li><a>烷烃及衍生物</a></li>
<li><a>烷烃及衍生物</a></li>
<li><a>烷烃及衍生物</a></li>
<li id="my_sp">
<a>看我后面是否被</ul><ul>分割开</a>
</li>
</ul><ul>
<li><a>烷烃及衍生物</a></li>
<li><a>烷烃及衍生物</a></li>
<li><a>烷烃及衍生物</a></li>
</ul>

...全文

1772 16 打赏收藏转发到动态举报

写回复

用AI写文章

16 条回复

切换为时间正序

请发表友善的回复…

发表回复

allali 2014-01-20

打赏
举报

引用 14 楼 u013177533 的回复:

(<li.*?id="my_sp"[\d\D]*?<\/li>) 什么意思

[\d\D]是所有字符包括换行 *代表0个或1一个以上[\d\D] $1是括号括起来的部分可以多个括号 $1,$2,$3.. 你上w3c看一下正则表达式就知道了

zhjdg 2014-01-18

打赏
举报

/(<li.*?id="my_sp"[\d\D]*?<\/li>)/ 是个简单的，再也没有比这个更简单的正则表达式。 *? 注意下是非贪婪就可以了。

is12 2014-01-18

打赏
举报

(<li.*?id="my_sp"[\d\D]*?<\/li>) 什么意思

zhjdg 2014-01-18

打赏
举报

innerHTML vs dom操作(W3c）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#select {
	border: 1px solid red;
}

#select li {
	background-color: #2aa;
	padding: 20px;
}
</style>
</head>
<body>
	<div class="subitem" id='cc'>
            <ul>
                <li><a>烷烃及衍生物</a></li>
                <li><a>烷烃及衍生物</a></li>
                <li><a>烷烃及衍生物</a></li>
                <li id="my_sp">
                    <a>看我后面是否被</ul><ul>分割开</a>
                </li>
                  
                <li><a>烷烃及衍生物</a></li>
                <li><a>烷烃及衍生物</a></li>
                <li><a>烷烃及衍生物</a></li>
           </ul>
        </div>
	
<script>
function youWant(){
	//var subitem0 = document.getElementById("cc");
	var subitem0 = document.getElementsByClassName("subitem")[0];
	var html = subitem0.innerHTML;
	
	var newhtml = html.replace(/(<li.*?id="my_sp"[\d\D]*?<\/li>)/g,"$1</ul><ul>");
	subitem0.innerHTML = newhtml;
}
youWant();

</script>	

</body>
</html>

TraineeFang 2014-01-18

打赏
举报

引用 7 楼 MengYouXuanLv 的回复:


function OK() {
$(".subitem").html($(".subitem").html().replace(/(<li.*?id="my_sp"[\s\S]*?<\/li>)/g,"$1</ul><ul>"));
 }

嗯，这个我试了，可以的，不过正则表达式我不太懂，你能帮我解释下 replace(/(<li.*?id="my_sp"[\s\S]*?<\/li>)/g,"$1</ul><ul>")); 这个里面正则表达式的意思么，前面的 "/" 是所有的正则表达式都要用 /开头吗？还有后面的 $1，应该是jquery里面的，是什么意思呢？谢谢。

TraineeFang 2014-01-18

打赏
举报

引用 10 楼 danica7773 的回复:

sorry，我错了，没看下面的代码，没有格式化的代码很多时候不看的，看的眼睛难受。明白你的意思了，不过，只能说，你不是一个有正常思维的人，这句话怎么像骂人呢! 我的意思是，如果对于html，dom的东西比较了解的话，是不会像你那样弄的。而且按一般人的想法，肯定是再新建一个ul，把其中一部分li搬到新的ul里面去，不会像你这样的搞法引用7楼的，这样可以 [quote=引用 7 楼 MengYouXuanLv 的回复:]
function OK() {
$(".subitem").html($(".subitem").html().replace(/(<li.*?id="my_sp"[\s\S]*?<\/li>)/g,"$1</ul><ul>"));
 }

[/quote] 嗯，这个我试了，可以的，不过正则表达式我不太懂，你能帮我解释下 replace(/(<li.*?id="my_sp"[\s\S]*?<\/li>)/g,"$1</ul><ul>")); 这个里面正则表达式的意思么，前面的 "/" 是所有的正则表达式都要用 /开头吗？还有后面的 $1，应该是jquery里面的，是什么意思呢？谢谢。

u011175581 2014-01-17

打赏
举报

楼主也是笔误吧你们就别队列吐槽了

嘻哈大咖秀 2014-01-17

打赏
举报

$(".subitem ul:last").after("</ul><ul>");

夜雨_Jason 2014-01-17

打赏
举报

$("#my_sp").after("</ul><ul>");

打字员 2014-01-17

打赏
举报

$("#my_sp").after("</ul><ul>"); 看你清楚，你加的是什么？你觉得那样加进去后，html变成什么样了？

打字员 2014-01-17

打赏
举报

sorry，我错了，没看下面的代码，没有格式化的代码很多时候不看的，看的眼睛难受。明白你的意思了，不过，只能说，你不是一个有正常思维的人

，这句话怎么像骂人呢! 我的意思是，如果对于html，dom的东西比较了解的话，是不会像你那样弄的。而且按一般人的想法，肯定是再新建一个ul，把其中一部分li搬到新的ul里面去，不会像你这样的搞法

引用7楼的，这样可以

引用 7 楼 MengYouXuanLv 的回复:


function OK() {
$(".subitem").html($(".subitem").html().replace(/(<li.*?id="my_sp"[\s\S]*?<\/li>)/g,"$1</ul><ul>"));
 }

scscms太阳光 2014-01-17

打赏
举报

哥哪能这么搞？你本是字符串操作，却要起到节点效果。

<ul>
    <li><a>烷烃及衍生物</a></li>
    <li><a>烷烃及衍生物</a></li>
    <li><a>烷烃及衍生物</a></li>
    <li id="my_sp"><a>烷烃及衍生物</a></li>
    <li><a>烷烃及衍生物</a></li>
    <li><a>烷烃及衍生物</a></li>
    <li><a>烷烃及衍生物</a></li>
</ul>
<button type="button">我擦</button>
<script type="text/javascript">
$(function(){
    $("button").click(function(){
        $("ul").after($("<ul/>").append($("#my_sp").nextAll()));
    })
})
</script>

TraineeFang 2014-01-17

打赏
举报

引用 1 楼 danica7773 的回复:

$("#my_sp").after("</ul><ul>"); 看你清楚，你加的是什么？你觉得那样加进去后，html变成什么样了？

这个：之前是这样的结构： <ul> <li><a>烷烃及衍生物</a></li> <li><a>烷烃及衍生物</a></li> <li><a>烷烃及衍生物</a></li> <li id="my_sp"><a>烷烃及衍生物</a></li> <li><a>烷烃及衍生物</a></li> <li><a>烷烃及衍生物</a></li> <li><a>烷烃及衍生物</a></li> </ul> 我想用这个方法： $("#my_sp").after("</ul><ul>");往中间加上</ul><ul>,你们看结构就知道，我是要</ul>这个结束标记，和上面的配对；让<ul>这个开始标记，和下面的配对。将上面的ul块切成两个 ul块，成为下面的结构： <ul> <li><a>烷烃及衍生物</a></li> <li><a>烷烃及衍生物</a></li> <li><a>烷烃及衍生物</a></li> <li id="my_sp"><a>烷烃及衍生物</a></li> </ul> <ul> <li><a>烷烃及衍生物</a></li> <li><a>烷烃及衍生物</a></li> <li><a>烷烃及衍生物</a></li> </ul> ，但是浏览器自动配对，将我的</ul><ul>, 转化成了<ul></ul>,我想问，这个怎么解决？

allali 2014-01-17

打赏
举报


function OK() {
$(".subitem").html($(".subitem").html().replace(/(<li.*?id="my_sp"[\s\S]*?<\/li>)/g,"$1</ul><ul>"));
 }

zhjdg 2014-01-17

打赏
举报

表达没错，不过超一般人逻辑的方法。这个要自己写，一般普通的，安共用规则办事的库是没有的这个方法的。

丨落叶 2014-01-17

打赏
举报

我觉得楼主表达没有错啊？

上周新接手一个网站建设的活儿，其中有需要要jquery代码实现三级菜单的需求，其实说难也不难，下面小编把代码分享给大家，供大家参考。先给大家展示下效果图，如果大家感觉还不错的话，请参考实现代码。 HTML代码： <body>

<ul> <li>首页 <ul> <li>JavaScript+ <ul> <li>三角函数li> <li>矩形li> ul> li> <li>语文

一款采用数组去重的方法过滤重复的水果图片效果代码，jQuery水果图片重复筛选去除代码。

讲师介绍：资深大数据、java讲师，十年IT行业从业经历，曾就职于上海花旗银行软件开发部担任项目经理多年,任职于国内等多家知名教育机构，精通javaweb，前端技术，J2EE技术体系，熟练使用Spring、SpringMVC,Mybatis 、hibernate、struts等java和大数据框架。教学理念：编程技术的学习重在理解，关键在动手操作。教师扣扣号:836482796,可联系老师获取课堂笔记和随堂案例.也可以加群:805845584,参与学习讨论和课题答疑! JavaScript是由浏览器的解释器解释执行的程序语言,是在客户端执行，从而间接地提升了Web服务器的性能.本套课程详细讲解js的基本语法和原理,以及具体在实际工作中的使用方法.在此基础上继续延伸讲解了jquery语言,实现wirte less,do more,更高效简洁的完成开发要求,满足企业中的工作需要!可访问csdn学习更多课程: https://edu.csdn.net/lecturer/1626

代码片段：

代码片段： <ul class="nav_banners"> <li class="blue_nav">券好赚li> <li>京东购物li> <li>淘宝购物券li> <li>腾讯象棋li> <li>绝地求生li> <li>微信跳一跳li> <li>答题红包li> <li>闯关小游戏li> ul>

JavaScript

87,910

社区成员

224,616

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章

用jquery操作html，向的第一li后面追加的问题

用jquery操作html，向
的第一li后面追加
的问题