2012-03-09 13 views
0

Jqueryの追加機能に問題があります。私はPHPのwhileループの周りにDIVを持っているしたいのですので、私はこのコードと開口部のdivタグが呼び出されましたが、終値のdivタグは、開始タグに登録されていません。奇妙なJQueryのAppendがDIVを完了していない

$('.class').append('<div class=\"class_name\">'); 
\\ While Loop 
$('.class').append('</div>'); 
+0

はちょうどあなたのPHPを生成し、jQueryのDIVでそれをラップしています。 PHPは最初に処理され、jQueryが生成された結果を処理できるブラウザに送られます。 – j08691

答えて

5

jQueryの唯一の追加しますjQueryを自動的に閉じることなく、オープニングdivタグを追加することはできません。 html文字列を作成し、その文字列を追加してみてください。

var strOutput = "<div class='class_name'>"; 

// replace this with php loop: for (var i = 1; i < 10; i++) { 
    strOutput += i; 
// replace this with php loop: } 
strOutput += "</div>"; 
$(".class").append(strOutput); 

あなたはwhileループPHPを行なったし、$ strOutputという変数を生成したと仮定UPDATE

$strOutput = "<div class='class_name'>some text here</div>"; 

は、このようなあなたのjavascriptにそれを追加します。

echo "$('.class').append('$strOutput');"; 

別の更新

行間を読んでください!これは単なる例です...単一の文字列を作成し、それをエコーし​​ます。

$strOutput = "<div class='class_name'>"; 
// within your while loop... 
$strOutput = $strOutput."somevalue"; 
// now after your while loop... 
$strOutput = $strOutput."</div>"; 
echo "$('.class').append('$strOutput');"; 
+0

私のPHP whileループはこれにどのように適合しますか? – drummer392

+0

基本的に、あなたのPHPを使って1つの長い文字列を作成し、その長い文字列全体を1つのdivとして一度に追加します。私はたくさんのPHPをやっていないので、あなたのためにPHPをループしているわけではありません。元のループを投稿した場合は、自分のコードで動作するように修正しても構いません。 –

+0

ああ、あなたが言っていることが分かります。私はJSに精通していませんが、文字列や長い変数はどこにコード内に入りますか? 'strOutput + = varName'を追加するだけです。 – drummer392

2

whileループの出力を変数に入れてdivに追加しないのはなぜですか?

はあなたがvarableにあなたのwhileループ内のコードを保存し、jqueryのアペンドコールでそれをエコー可能性が

var output = //the output from the while loop 

$('.class').append('<div class=\"class_name\"></div>').append(output);

var div = $('<div class=\"class_name\"></div>').append(output);  
$('.class').append(div); 
+0

これは、コンセプトは動作しますが、生成された '.class_name' divではなく、' .class'に出力を追加します。 –

0

を更新しました。

ケビン・Bは、上記に述べたように、jQueryのは、唯一の完全な要素を追加しますので、このような何か:

<?php 
//while loop (save whatever you'd echo/output to a var 
?> 

$('.class').append('<div class="class_name"><?=$output_from_while_loop?></div>'); 
関連する問題