当使用jquery包装在主div中时,如何在两段之间添加div标签

时间:2012-10-31 10:22:33

标签: javascript jquery asp.net

我必须在文章文本之间的某处显示每篇文章的横幅广告,让我们在第2或第3段之后说明。

jsFiddle

上的文章示例

如果你已经检查了jdFiddle,那么你可以更好地理解我的场景,我想在第二段之后使用红色横幅框,我想用jQuery做它我会很感激,如果有人可以帮我这个。

我可以使用c#在asp.net web表单中通过拆分第二段末尾的文本来做同样的事情。添加横幅div

我希望有一个更适合这种情况的解决方案

<div class="ArticleContent">
    <p>
        Lorem ipsum dolor sit amet, ut auctor mauris eget erat nonummy, non mauris risus libero voluptates cras, debitis elementum eget etiam. Class nisl, at euismod ligula nulla sodales, tristique nunc, justo pellentesque tempora. Lectus metus penatibus mi donec magna, sapien adipiscing magna sed, integer vitae.</p>

<p>Nam diam malesuada purus, fermentum commodo luctus laoreet quisque, pede eget conubia, conubia dui per sit a eu laoreet, eu massa. Donec in sem at, wisi ante sed non aptent, id facilis lorem ligula nec nullam, vestibulum elementum dolor natoque viverra dolor amet, aliquet eu lectus lectus suspendisse sodales nulla. Lacinia suscipit erat. </p>

<p>Tellus quam lectus pretium in montes tellus, mi nobis felis et tincidunt tempor adipiscing, consectetuer quia non dui odio nam, elit morbi elit laoreet nisl nibh. </p>

<p>Tincidunt lorem porta auctor, lobortis in molestie eu, volutpat a sapien donec vitae id, at enim.</p>
    <div class="ContentBanner"> BANNER WILL SHOW UP HERE</div>
</div>

3 个答案:

答案 0 :(得分:3)

使用jQuery,您可以使用以下代码:

$('<div class="ContentBanner"> BANNER WILL SHOW UP HERE</div>').insertAfter('.ArticleContent p:nth-child(3) ');

这应该有用!!!!

http://jsfiddle.net/eehtK/

答案 1 :(得分:2)

$(".ContentBanner").insertAfter(".ArticleContent p:eq(1)")

DEMO

答案 2 :(得分:1)

$("div.ArticleContent p").each(function(index,item)
    {
        if(index==1 || index==2)
        {
            var divBanner='<div class="ContentBanner"> BANNER WILL SHOW UP HERE</div>';

            $(this).append(divBanner);
       }        
  });