JQuery - Как добавить один HTML-тег для некоторых HTML? - PullRequest
Новая
       4

JQuery - Как добавить один HTML-тег для некоторых HTML?

2 голосов
/ 11 мая 2010

Я хочу вставить только один перед текстом ниже (прямо перед LINK): 

<li><a href="">LINK</a></li>

Итак, выше становится 

<li><a href=""><span>LINK</a></li>

Вот мой код JQuery: 

$('#mainnav li a').prepend('<span>');

Когда я просматриваю код в firebug после, я вижу <span></span>, как я могу получить открывающий тег span, а не закрывающий тег?

Ответы [ 5 ]

6 голосов
/ 11 мая 2010

Во-первых, вы хотите искаженный HTML. JQuery сделает это трудно, если не невозможно создать это. Я бы предложил сделать это за один шаг, а не несколько. Попробуйте: 

$("li > a").each(function() {
  $(this).contents().wrapAll("<span>");
});

Введите: 

<ul>
  <li><a href="...">testing</a></li>
  <li><a href="...">rich <b>content</b> with <i>inner tags</i></a></li>
</ul>

Выход: 

<ul>
  <li><a href="..."><span>testing</span></a></li>
  <li><a href="..."><span>rich <b>content</b> with <i>inner tags</i></span></a></li> 
</ul>
3 голосов
/ 01 октября 2012

Я столкнулся с проблемой, когда я использовал сторонний API, который использовал php curl для размещения плоского HTML на моей веб-странице. В API-интерфейсе HTML было возвращено несколько искаженных тегов span, которые просто убивали мой рендеринг в IE. Я использовал функцию replaceWith () в Jquery, чтобы исправить проблему. Вот пример:

Неверно сформированный HTML: (обратите внимание на неоткрытый тег span) 

<a class="aa_float_right aa_navlink" href="http:whatever">My Account</a></span>

Мое решение: 

$('.aa_navlink').replaceWith('<span class="test"><a class="aa_float_right aa_navlink" href="http:whatever">My Account</a>');

Результирующий HTML: 

<span class="test"><a class="aa_float_right aa_navlink" href="http:whatever">My Account</a></span>

БУМ, теперь у нас есть хорошо сформированный HTML, спасибо, так дерьмовые сторонние API (и я имею в виду действительно дрянные).

Это исправление было дано мне от разработчиков из SaltWater Co.

1 голос
/ 11 мая 2010

Я не знаю, почему вы этого хотите, но это можно сделать таким образом, 

$('#mainnav li a').html(function(i,v){
   return '<span>' + v;
})
0 голосов
/ 11 мая 2010

Многие методы jQuery предназначены для автоматического создания элементов только из наполовину написанных тегов, например, "<span>" для .prepend () приведет к добавлению всего элемента span в DOM. Или, как вы увидите в Firebug, "<span></span>" сначала вставляется в элемент привязки.

Я не понимаю, почему вы хотите создать недопустимый HTML, но если вам нужно, вы можете сделать это следующим образом: 

$("li > a").html("<span>"+$("li > a").html());

Или, как предполагает Рейгель, с анонимной функцией метода .html () (я написал свой ответ довольно быстро и, очевидно, бездумно): 

$("li > a").html(function (idx, html) {
    return "<span>" + html;
});

В противном случае может показаться, что вы хотите обернуть содержимое элемента привязки в промежуток. В этом случае вместо этого вы должны использовать один из методов jQuery : 

$("li > a").wrap("<span>");

Вы не должны создавать как начальный элемент, так и закрывающий элемент самостоятельно (при использовании jQuery).

0 голосов
/ 11 мая 2010

Когда вы используете prepend, вы не добавляете текст разметки на страницу, вы добавляете elements на страницу. Элементы не имеют начальных и конечных тегов, элементы являются элементами. Если вы хотите обернуть кучу элементов в span (я предполагаю, что это то, что вы хотите, если вы хотите вставить начало в одном месте и конец в другом), вам нужно добавить перейти к контейнеру, а затем переместить элементы в него.

Например, это перемещает все ссылки из элемента foo и перемещает их в промежуток внутри container: 

var stuff;
var container;

stuff = $('#foo a');
span = $("<span style='background-color: yellow'>");
span.append(stuff);
$('#container').append(span);
...