Как добавить HTML к первому вхождению строки после выбранного элемента

Question

У меня html вот так:

<div class=foo>
  (<a href=forum.example.com>forum</a>)
  <p>
  Some html here....
</div>

И я хочу вставить еще одну ссылку после первой, например:

<div class=foo>
  (<a href=forum.example.com>forum</a>) <a href=blog.example.com>blog</a>
  <p>
  Some html here....
</div>

... но поскольку он заключен в (), я не могу использовать:

$('div.foo a:first').append(' <a href=blog.example.com>blog</a>');

... который поместил бы его перед ).

Итак, как мне расширить выбор jQuery для выбора литерала ) или мне нужно использовать другое решение?

Answer 1

Вы можете либо сопоставить и заменить всю строку (<a />), либо поместить другой элемент (например, интервал) вокруг всего объекта.

<span>(<a href=forum.example.com>forum</a>)</span>

Append также вставляет новый тег привязки в существующую привязку. Вы, вероятно, обнаружите, что ищете после ()

Answer 2

Не могли бы вы выбрать следующий тег <p> и добавить (на самом деле ... используйте метод перед ) ссылку?

$('div.foo a:first').next('<p>').before(' <a href=blog.example.com>blog</a>');

Answer 3

Никогда не следует изменять XML / HTML (особенно недоверенные / плохо отформатированные) с помощью регулярных выражений, но если вы действительно в отчаянии:

var container = $('div.foo');
var append = '<a href="...">...</a>';
var html = container.html();
var replaced = html.replace(/\(<a [^\)]+\)/, "$& " + append);
container.html(replaced);

Обратите внимание, что приведенное выше не удастся, если у вас есть символ ")" внутри a-tag.