2

以下のテキストの前 (LINK の直前) に<span>を 1 つだけ挿入したい:

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

したがって、上記は次のようになります

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

ここに私のJQueryコードがあります: 

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

後に firebug でコードを表示する<span></span>と、終了タグではなく開始スパン タグを取得するにはどうすればよいですか?

4

5 に答える 5

6

まず、必要なのは不正な HTML です。jQuery は、それを作成することを、不可能ではないにしても困難にするでしょう。複数のステップではなく、1 つのステップで実行することをお勧めします。試す：

$("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>
于 2010-05-11T09:59:58.657 に答える
4

php curl を使用してフラットな HTML を Web ページに配置するサードパーティ API を使用しているという問題に遭遇しました。返された API HTML には、不正な形式のスパン タグがいくつか含まれており、IE でのレンダリングを強制終了していました。Jquery の replaceWith() 関数を使用して問題を修正しました。例を次に示します。

不正な 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 を持っています。ありがとうございます。

この修正は、SaltWater Coの開発者から提供されました。

于 2012-10-01T14:59:36.987 に答える
2

なぜあなたがそれを望んでいるのかわかりませんが、この方法で行うことができます。

$('#mainnav li a').html(function(i,v){
   return '<span>' + v;
})
于 2010-05-11T10:03:57.613 に答える
1

を使用する場合prepend、ページにマークアップ テキストを追加するのではなく、ページに要素を追加します。要素には「開始」タグと「終了」タグはありません。要素は要素です。一連の要素を a でラップしたい場合span(要素の先頭をある場所に挿入し、末尾を別の場所に挿入したい場合は、それが必要だと思います)、にスパンを追加する必要がありますコンテナに要素を移動します。

たとえば、これはすべてのリンクを要素の外にfoo移動し、それらをスパン内に移動しますcontainer:

var stuff;
var container;

stuff = $('#foo a');
span = $("<span style='background-color: yellow'>");
span.append(stuff);
$('#container').append(span);
于 2010-05-11T09:59:08.030 に答える
0

多くの jQuery メソッドは、半分しか書かれていないタグから要素を自動的に作成するように設計されて"<span>"います。たとえば、.prepend() を実行すると、span 要素全体が DOM に追加されます。または、Firebug でわかるように、"<span></span>"最初にアンカー要素に挿入されます。

無効な HTML を作成する理由がわかりませんが、必要な場合は、次の方法で作成できます。

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

または、Reigel が示唆するように、 .html() メソッドに無名関数を使用します (私は回答をかなり迅速に、そして明らかに思慮深く書きませんでした):

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

そうしないと、アンカー要素のコンテンツをスパンでラップしたいように見えるかもしれません。その場合、代わりにjQuery ラッピング メソッドのいずれかを使用する必要があります。

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

開始要素と終了要素の両方を自分で作成するつもりはありません (jQuery を使用する場合)。

于 2010-05-11T10:11:47.483 に答える