-1

それは非常に明白なことですが、他の人が直面し、stackoverflowで解決された非常に類似した問題を見ているにもかかわらず、私はそれを見ることができません。私はそれがあなたに飛び出すことを望んでいます。既存の要素を挿入（またはinsertAfter）できない理由を理解するのを手伝ってください。

私は自分のhtmlビューファイル（私はcodeigniterを使用しています）を関連するjavascriptに含めました。

いつものように、どうもありがとうございました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Afterview</title>
    <script src="jquery-1.6.4.js" type="text/javascript" charset="utf-8"></script>  
    </head>
    <body>
        <div class="divm@n.com">
            <li>
                Click for more details.&nbsp;
                <a id="m@n.com" class="detailbtn" href="#detail-id">(Details)</a>
            </li>
       </div>
    </body>
</html>

<script type="text/javascript">
    var html_string;
    $('.detailbtn').each(function(i){
        $(this).click(function(){
            html_string='<li>hello</li>';
            $('.divm@n.com').insertAfter(html_string).show();
       });
    });

</script>
4

4 に答える 4

1

.after()次のようにクラス名を使用して修正するようにコードを変更したいと思います。

$('.divmncom').after('<li>hello</li>').show();

クラス名を<div class="divmncom">に変更して、必要とは異なる方法で解釈されている特殊文字を削除します。

そして、物事を片付けている間、html_stringグローバル変数の必要性を完全に取り除くか、ローカル変数にすることによって、グローバル変数を取り除く必要があります。

説明として、あなたはどのように機能するかを理解していないようinsertAfter()です。あなたが持っているとき：

$(x).insertAfter(y)

xで表されるターゲットの後に、セレクターに一致する各要素を挿入しyます。あなたのコードでは：

 html_string='<li>hello</li>';
 $('.divm@n.com').insertAfter(html_string).show();

html_string既存のDOM要素と一致するため、挿入を行う場所がありません。

さらに、CSSセレクター.divm@n.com'は文字に問題がある可能性があり、 inを2番目のクラスの開始として@解釈します。これはあなたが望むものではありません。これらの特殊文字をエスケープして引き続き使用する方法はおそらくありますが、それらの使用を完全に停止して、クラス名を特殊文字をエスケープする必要のない単純なクラス名にする方がはるかに安全なコードです。..com

おそらく、関連する2つのjQueryメソッドのページを読んで.after()、.insertAfter()特定の問題に適切なパラメーターを適切なメソッドに適用していることを確認する必要があります。.after()代わりに使いたいようです。

于 2012-05-22T18:52:38.220 に答える
1

私はコードを理解していませんが、ピリオドと@セレクターをエスケープする必要があります

$('.divm\\@n\\.com')

編集

その外観からあなたは置き換えることができます

$('.detailbtn').each(function(i){           
        $(this).click(function(){
            html_string='<li>hello</li>';
            $('.divm@n.com').insertAfter(html_string).show();
       });
    });

と

$(".detailbtn").click(function(e){
  e.preventDefault();
 $("<li>hello</li>").insertAfter(".divm\\@n\\.com");
});

デモ

insertAfterPSは、どのように機能するかについても@jfriend00の回答を参照してください

于 2012-05-22T18:53:14.220 に答える
1

実際には、2つのエスケープ変数が必要です。1つはと用、@もう1つは。用.です。

私が理解していることですがHTML、リンクをクリックした後にコードを追加したいようです。そうであれば、使用することをお勧めしappend()ます（必要に応じて使用することもできafter()ます）

HTML

<div class="divm@n.com">
<li>
    Click for more details.&nbsp;
    <a id="m@n.com" class="detailbtn" href="#detail-id">(Details)</a>
</li>

JS

$('.detailbtn').click(function(){
    var html_string='<li>hello</li>';
    $('.divm\\@n\\.com').after(html_string);
});

これが実用的な解決策です...

于 2012-05-22T19:06:42.233 に答える
0

クラス名「divm@n.com」には「。」が含まれているため無効です。これは、要素にクラス「divm@n」とクラス「com」が含まれている必要があることを意味します。また、この要素の後にhtml_stringから値を挿入するには、.after（）関数を使用するか、現在の.insertAfter（）を次のように変更する必要があります。

$(html_string).insertAfter('.divm@ncom').show();

これは、私が得たものです：

var html_string;
$('.detailbtn').each(function(i){
    $(this).click(function(){
        html_string='<li>hello</li>';
        $('.divm@ncom').after(html_string).show();
   });
});​
于 2012-05-22T18:56:11.020 に答える