jQuery UIダイアログボックスのテキストに改行オプションがありますか？

Question

ポケモンからのデータを使ってウェブサイトを作っていて、ダイアログボックスを実行しようとしています。私は、テキストでJSの改行文字を使用して試してみた：

function alertBox(monster) { 
    $("#dialog").dialog(); 
    $("#dialog").dialog("option", "title", monster); 
    $("#dialog").text("Height: " + pokemon.height[monster] + "\n" + 
         "Weight: " + pokemon.weight[monster]); 
} 

...そして私はまた、HTMLの改行タグを使用して試してみた：

function alertBox(monster) { 
    $("#dialog").dialog(); 
    $("#dialog").dialog("option", "title", monster); 
    $("#dialog").text("Height: " + pokemon.height[monster] + "<\br>" + 
         "Weight: " + pokemon.weight[monster]); 
} 

しかし、どちらも改行を返しているように見えるん私が探している効果！ JS改行は単にスペースとして機能し、html改行タグは文字列に連結するだけです。ダイアログテキストに改行を強制する方法はありますか？

Answer 1

jQuery .text()関数は自動的にHTMLエンティティをエスケープするため、<br />タグはHTMLとして解釈されなくなり、代わりにエスケープされたテキストに変換されます。このHTMLエスケープを防止するために

、あなたが内容を設定する.html()の代わり.text()を使用する必要があります。

function alertBox(monster) { 
    $("#dialog").dialog(); 
    $("#dialog").dialog("option", "title", monster); 
    $("#dialog").html("Height: " + pokemon.height[monster] + "<br />" + 
         "Weight: " + pokemon.weight[monster]); 
} 

Answer 2

は、追加することを検討してください：

$("#dialog").css("white-space","pre-wrap"); 

これは\nが重要になります、そしてそれは、次のようなレンダリングされます。

また、実際のHTMLを使用することを検討してください。例えば、あなたのダイアログは次のようになります。

$("#dialog").html("<ul>" + 
    "<li><b>Height:</b> "+pokemon.height[monster]+"</li>" + 
    "<li><b>Weight:</b> "+pokemon.weight[monster]+"</li>" + 
"</ul>"); 

は、より複雑なレイアウトのために、私は、テンプレートシステムを使用しての代わりに、あなたはJavaScriptにHTMLをハードコーディングすることをお勧めしたいです。

Answer 3

が、それはテキスト（）のval（）とhtml（）は

をどのように動作するかを確認するために役立つことを願っています

$(document).ready(function() { 
 

 
    $("#dialog").html("Height: " + 11 + "<br>" + 
 
     "Weight: " + 22); 
 

 
    $("#dialog2").val("Height: " + 11 + "\n" + 
 
     "Weight: " + 22); 
 

 
    $("#dialog3").text("Height: " + 11 + "\n" + 
 
     "Weight: " + 22); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id="dialog"></div> 
 
<textarea rows="5" cols="20" name="text" id="dialog2"></textarea> 
 
<textarea rows="5" cols="20" name="text" id="dialog3"></textarea>