如何在几个无类div中添加一些东西

时间:2014-04-16 22:35:21

标签: javascript jquery html

在我的身体里,我有几个包含一个段落的div。我试图在每个div的末尾添加一个虚线,而不添加或更改正文中的任何内容。如何定位这些div以追加该行?

div看起来像:div p text / p / div

根据要求,这是我正在处理的完整页面:http://pastebin.com/8DFBxfDw

4 个答案:

答案 0 :(得分:1)

如果您使用的是jQuery,则可以

$('div').append('<hr>')

或者您可以使用CSS技巧并使用::after

div::after{
   content: '';
   border-bottom: 2px dashed #000;
   position: absolute;
   left: 0px;
   right: 0px;
   bottom: 0px;
}

::after选择器可能无法在所有浏览器中使用,因此您需要为旧浏览器使用polyfill。 http://caniuse.com/css-gencontent

答案 1 :(得分:0)

根据您提供的有限信息,我建议:

$('div p:only-child').parent().css('border-bottom', '2px dashed #000');

JS Fiddle demo

然而,使用纯CSS:

div > p:last-child {
    border-bottom: 2px dashed #f00;
}

div > p + p:last-child {
    border-bottom-width: 0;
}

JS Fiddle demo

参考文献:

答案 2 :(得分:0)

$('div').each(function(index, value){
    $(this).append('---');
}

但是,由于您提供的信息量有限,因此CSS方法可能是最佳做法。

答案 3 :(得分:0)

考虑到你不想在身体上添加任何东西,也许在CSS而不是JavaScript中:

#faq div { border-bottom: 1px dashed; }

如果您不希望最后一个div有一行:

#faq div + div { border-top: 1px dashed; }