我有一些页面，他们的格式如下：
<div class="selected">
<p>some word</p>
<p>some word</p>
<p>some word</p>
<p>some word</p>
...<!--许多个p段落-->
</div>
<div class="selected">
<p>some word</p>
<p>some word</p>
<p>some word</p>
<p>some word</p>
...<!--许多个p段落-->
</div>
...<!--许多个div.selected-->如何根据文章段落，自动添加jQuery toggle?
我想在每3个P段落之后，自动添加一个jQuery toggle，隐藏剩余的部分。
但我对JQUERY很陌生，求高手帮忙修改完整。谢谢。jQuery('.selected').find('p:nth(3)').add('<a class="toggle">view more</a>');
$('.toggle').click(function () {
$("p").toggle();
});
<div class="selected">
<p>some word</p>
<p>some word</p>
<p>some word</p>
<p>some word</p>
...<!--许多个p段落-->
</div>
<div class="selected">
<p>some word</p>
<p>some word</p>
<p>some word</p>
<p>some word</p>
...<!--许多个p段落-->
</div>
...<!--许多个div.selected-->如何根据文章段落，自动添加jQuery toggle?
我想在每3个P段落之后，自动添加一个jQuery toggle，隐藏剩余的部分。
但我对JQUERY很陌生，求高手帮忙修改完整。谢谢。jQuery('.selected').find('p:nth(3)').add('<a class="toggle">view more</a>');
$('.toggle').click(function () {
$("p").toggle();
});
<!--已测试-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".selected").find("p:gt(2)").css("display","none")
$(".selected p:nth-child(3)").toggle(function(){
var index = $(this).parent().find("p").index($(this));
$(this).parent().find("p").slice(index+1,$(this).parent().find("p").length).show();
},
function(){
var index = $(this).parent().find("p").index($(this));
$(this).parent().find("p").slice(index+1,$(this).parent().find("p").length).hide();
})
})
</script>
</head>
<body>
<div class="selected">
<p>1:some word</p>
<p>2:some word</p>
<p>3:some word</p>
<p>4:some word</p>
</div>
============================
<div class="selected">
<p>5:some word</p>
<p>6:some word</p>
<p>7:some word</p>
<p>8:some word</p>
</div>
============================
<div class="selected">
<p>9:some word</p>
<p>10:some word</p>
<p>11:some word</p>
<p>12:some word</p>
<p>13:some word</p>
<p>14:some word</p>
</div></body>
</html>
直接点击最后一个p，隐藏，展开，有点别扭，能否帮忙在第三个P后面，自动加一个类似于“<a class="toggle">view more</a>”的按钮吗？
//就直接在段落p后面加上了
$(document).ready(function(){
$(".selected").find("p:gt(2)").css("display","none")
$(".selected p:nth-child(3)").append("<br/><a class=\"more\">view more</a>").toggle(function(){
var index = $(this).parent().find("p").index($(this));
$(this).parent().find("p").slice(index+1,$(this).parent().find("p").length).show();
},
function(){
var index = $(this).parent().find("p").index($(this));
$(this).parent().find("p").slice(index+1,$(this).parent().find("p").length).hide();
})
})