1

次の jquery UI の例では、アラート ボックスがあります。

<div class="ui-widget">
    <div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">
        <p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
        Alert: something went wrong</p>
    </div>
</div>

アラート アイコンを処理するセクションを削除せずにアラート テキストを編集できるようにしたいのですが、JavaScript 内にすべてのウィジェット html を記述する必要もありません。

のような$('p').html("new alert")ことをすると、スパン（アイコン）部分が削除されます。を使用しても同じことが起こります$('p').text("new alert")。

どうすればこれを行うことができますか？

4

4 に答える 4

1

内側の div 要素を使用して、その上にテキストを配置できます

<div><span></span><div id="innerDiv"></div></div>
于 2013-02-18T08:07:13.470 に答える
1

これを試してみてくださいhttp://jsfiddle.net/euFUL/

HTML

<div class="ui-widget">
    <div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">
        <p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
            <span id="ErrorMsg">Alert: something went wrong</span>
        </p>
    </div>
</div>

JS

$(function () {
    $('#ErrorMsg').text("new alert");
});
于 2013-02-18T08:07:29.737 に答える
0

HTML構造を変更することもできますが、変更したくない場合は、次のようにしてください。

var $p = $('p');
$p.find('span').appendTo($p.html('Not an alert anymore'));

http://jsfiddle.net/tRMyq/

于 2013-02-18T08:09:09.180 に答える
-1

jQuery の特別なセレクターを使用する:not()

于 2013-02-18T08:05:47.343 に答える