jQuery：在一组div后面添加HTML

Question

我有类似这样的东西： ...

<div id="d120" >content</div>
<div id="d123" >content</div>
<div id="d112" >content</div>
<div id="d145" >content</div>
<div id="d134" >content</div>
//Insert here hello world

<div id="bla" >asd</div>
<div id="footer" >asd</div>

任何人都知道如何在所有具有类似d+数字的id的div之后插入HTML吗？

- Omu

Answer 1

如果格式中那些div和#bla之间没有任何东西，就像你的例子一样，这里有一个更安全的方法，使用.before()（因为也会匹配

）。

$("#bla").before("<b>Hi There</b>");

更新：既然你说可以给它们添加类，那我会这样做，给内容的div添加一个class="content"，并使用以下jQuery代码：

$(".content:last").after("<b>Hi There</b>");

- Nick Craver

---

没有bla只是为了表明里面还有其他东西，但我不知道会是什么，尽管这是一个好主意。 - Omu

@Omu - 可以给这些内容div添加一个类吗？仅仅基于起始字母 d 进行匹配并不是很安全，你还有其他的方法可以使用吗？ - Nick Craver

@Omu - 我会给他们一个类，然后使用 $(".MyClass:last").after(htmlStringHere);，更新答案以展示这种方法。 - Nick Craver

Answer 2

这将安全地测试以数字结尾的元素的id，而不是任何以"d"开头的id。

$('div[id]').filter(function() {
    return /\d+$/.test($(this).attr('id'));
}).last().after(...my html...);

- user113716

---

+1：根据HTML标记和OP的要求，这似乎是更通用的解决方案。 - Sarfraz

Answer 3

$("div[id^=d]:last").after("some html");

或者：

$("some html").insertAfter("div[id^=d]:last");

- karim79

---

你真的认为这是一个安全的方法吗？ - user113716

不是真的，至少需要在ID开头再添加几个字符，以消除潜在的自然灾害（其他以d开头的div）。我认为它们应该被分配一个共同的类。 - karim79

Answer 4

试试这个：

$(function(){
  $('div[id^="d"]:last').after('<div>Hello World</div>');
});

注意：根据Nick Craver的建议，这将匹配任何以d开头的

元素，但我认为这是您必须按照您的HTML标记进行的。

- Sarfraz

Answer 5

添加另一个带有ID的div，然后只需更改该元素的HTML $('#id').html('html');

除非这会破坏您的页面布局？

- user16208