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

<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>

16 个解决方案

#1

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

看你清楚，你加的是什么？你觉得那样加进去后，html变成什么样了？

#2

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

#3

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

#4

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

#5

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

#6

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

#7


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

#8

引用 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>,我想问，这个怎么解决？

#9

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

<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>

#10

sorry，我错了，没看下面的代码，没有格式化的代码很多时候不看的，看的眼睛难受。

明白你的意思了，不过，只能说，你不是一个有正常思维的人用jquery操作html，向的第一li后面追加的问题

，这句话怎么像骂人呢!

我的意思是，如果对于html，dom的东西比较了解的话，是不会像你那样弄的。
而且按一般人的想法，肯定是再新建一个ul，把其中一部分li搬到新的ul里面去，不会像你这样的搞法用jquery操作html，向的第一li后面追加的问题

引用7楼的，这样可以

引用 7 楼 MengYouXuanLv 的回复:


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

#11

引用 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>"));
 }

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

#12

引用 7 楼 MengYouXuanLv 的回复:


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

#13

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>看我后面是否被&lt;/ul&gt;&lt;ul&gt;分割开</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>

#14

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

#15

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

#16

引用 14 楼 u013177533 的回复:

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

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

#1

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

看你清楚，你加的是什么？你觉得那样加进去后，html变成什么样了？

#2

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

#3

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

#4

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

#5

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

#6

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

#7


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

#8

引用 1 楼 danica7773 的回复:

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

看你清楚，你加的是什么？你觉得那样加进去后，html变成什么样了？

#9

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

<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>

#10

引用7楼的，这样可以

引用 7 楼 MengYouXuanLv 的回复:


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

#11

引用 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>"));
 }

#12

引用 7 楼 MengYouXuanLv 的回复:


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

#13

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>看我后面是否被&lt;/ul&gt;&lt;ul&gt;分割开</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>

#14

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

#15

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

#16

引用 14 楼 u013177533 的回复:

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

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

秒客网

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

16 个解决方案

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

#11

#12

#13

#14

#15

#16

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

#11

#12

#13

#14

#15

#16

相关文章