2

Jquery 1.7.1 の使用

私は2つのdivを持っています

<div class="highlightStart"></div>
{page content here}
<div class="highlightEnd"></div>

それらはページのソースに表示されます。しかし、ページの下部に追加したこの jquery は機能していません。

<script type="text/javascript" id="makeHighlight">
   $(document).ready(function () {
     $("div.highlightStart").replaceWith("<section class='highlight'>");
     $("div.highlightEnd").replaceWith("</section>"); 
   });
</script>

ブラウザ コンソール (Chrome) に JavaScript エラーが表示されません。何も置き換えられません。

4

3 に答える 3

3

まず、あなたが間違った DOM 構造を作成していることを確認したいと思います。スクリプトが実行されると、次のようになります。

<div class="highlightStart"><section></div>
{page content here}
<div class="highlightEnd"></section></div>

あなたが望むなら、これは良い構造ではありません：

<section>
{page content here}
</section>

次のようになります。

あなたのDOM:

<div id="content">
{page content here}
</div>

そしてあなたのスクリプトで：

$(document).ready(function () {
  content = $('#content').text();

  $('#content').html($('<section>').text(content));
});

参考までにmyfiddleをご覧ください

于 2013-10-21T23:40:23.193 に答える
1

replaceWith メソッドは、タグではなく要素全体を想定しています。ページのコンテンツを新しい要素でラップしてから、元の 2 つの div を削除する必要があります。

更新：これはあなたを近づけるかもしれません：

$(document).ready(function () {
   $('.highlightStart').nextUntil('.highlightEnd').andSelf()
       .wrap('<section class="highlight"></section>');

    $('.highlightStart, .hightlightEnd').remove();
});

http://jsfiddle.net/isherwood/H36UE

ちょっと話が逸れましたが、もう時間がありません。幸運を。

于 2013-10-21T23:30:37.393 に答える